css之3D旋转讲解

3D动画
3d动画不同于2d动画，它是立体空间，三维的；
目的：如何在网站中实现立体效果；
1.建立立体思维方式；
2.找到坐标原点，以及x,y,z轴；
x轴：是指网站的水平方向； y轴：网站的竖直方向，往右值越大；z轴：看不见的虚拟空间，越往里，越虚拟，值越大；
原点：以元素为基准，默认位置，视图窗口左上角；
（3d视图：近大远小。这里的x轴和数学中的没有区别，但是y轴的方向与数学中的y轴是相反的，越往下值越大）
3.根据属性沿着轴进行抽象样式
注意:3d动画的 x ，y ， z 轴不是在浏览器上的，而是在元素本身上的，会随着元素的转动而转动；
那么问题来了，2d ， 3d 都有轴，那么轴在哪？
3d的轴在元素自身上，而2d的轴则是以页面为标准。
当元素发生旋转时，坐标轴也会发生变化，但是原心不变；

2D和3D属性使用的不同点
2D函数在使用时不用添加 x， y ，z；
例如：translate（x，y） rotate（x，y）
而3D在使用的时候不一样：
例如：translateX,Y,Z()，rotateX,Y,Z();

语法上的区别：
2d可以直接使用属性；
3d由于是立体的，想要看到效果，需要在body中加上：perspective：1000px；（景深效果）；
注：如若一个项目为3d，最好所有的元素都设置为3d。

理解难点，重点：
1.
2d是水平面，常用；
3d整体思维是与2d不同的，在做3d的时候，忘记平面，才能考虑立体；
2.
3d旋转后，轴方向会发生变化，轴指向也会发生变化，但是原点不变；
2d旋转后轴方向也会发生变化，同样是它的原点也不会发生变化；
3d更加抽象；需要站在不同的角度去思考问题；

写3d的个人思路：
1.先试用手稿画出3d空间立体样式；
2.不论有多少块，先让位置统一，然后在移动位置；
3.逐个进行3d的旋转，平移处理；
4.旋转角度：这个是可以算出来的，平移的位置距离需要自己来调试；
注意：复杂的立体空间：大房子里面有个小柜子，小柜子里面有小盒子；摆放盒子在柜子中的位置，摆放柜子在房子中的位置；