如何使用CSS3实现3D效果？

一、首先先做一个平面的3D效果。
1.要显示3D效果必须添加perspective（景深），值为px，为观察距离，即观察点到屏幕的距离（Z轴）。
代码和效果图如下：

二、做一个立方体的3D效果。
1.首先在最外层的容器中加上景深perspective，设置值稍微大点，否则拉伸变形影响效果。
2.有厚度的模型需要添加代码transform-stylre:preserve-3d;进行3D转换，以便能显示多个平面的图像。
3.做一个立方体，首先添加6个平面，通过绝对定位固定在外层容器中，然后需要按照顺序给各个平面添加对应得代码，按照立方体的样式通过transform:rotate和translate实现。可以添加代码transform-origin来设置容器旋转的基点位置（可以为数值px 也可以为方向left、right…）
4.添加persoective-origin: ;（观察角度）。
注：perspective和transform-style等3D效果的代码需要添加在最外层容器中才可以实现效果。
代码和效果图如下：
在这里插入图片描述