css中2D和3D的区别

总结:
1. 3D中的位移也是相对于元素自身位置。
2. 3D转换中同样可以设置百分比,依然相对元素自己宽度和高度(后面的Z不能设置百分比)

3.旋转（rotate）
注意：旋转了以后，3d坐标轴的方向会发生变化的
rotateX(angle)
方向判断利用左手原则
rotateY(angle)
方向判断利用左手原则
rotateZ(angle)
方向判断利用左手原则
注：3D旋转中沿Z轴旋转的效果与2D转换中的旋转效果一样。

4.缩放（scale）
scaleX()
沿着x轴放大或缩小
scaleY()
沿着y轴放大或缩小
scaleZ()
沿着Z轴放到或缩小
注意：如果希望看到scaleZ()的效果，该元素必须是立体图形 。

5.倾斜 （skew）
3d中的倾斜实际和2d中的倾斜是一样的
skewX()
沿着x轴倾斜，x轴方向的两条边平行
skewY()
沿着y轴倾斜，y轴方向的两条边平行

6.子元素保留3D转换
transform-style: flat；
transform-style: preserve-3d;
flat 不保留3d转换，默认值
preserve-3d; 子元素保留3d转换，如果不设置这个属性，内部元素不会存在3D的遮挡关系(伪3D)
- 我们通过立方体案例发现，如果不设置这个样式，元素是一种伪3D效果，是平面结构
- 设置后可以看到元素呈现立体的显示效果，但是注意，设置了该样式，也要旋转给个角度才可以更直观的看出是个3d立体图。

7.透视

都需要加透视 数值越大 相当于距离屏幕越小  （看的）成像越小