这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战

前言

大家好，我是不吃鱼的猫。今天咱们说说3d动画，大家应该很感兴趣，在生活中，大家身处于一个三维的空间，也就是3d。不再是二维平面上，也就是2d，只有前后左右，没有上下，在描述的过程中，三维比二维多了z轴的观念。给大家说个冷知识，其实大家眼睛看到的其实是二维的，眼睛在看物体的过程中，大脑也在脑补画面。

3d的三个功能

当然我们在设置3d属性之前需要设置3d空间，好让浏览器解析的时候，知道设置的属性是3d的。

transform-style: preserve-3d;

上下左右位移咱就不说了，2d里面都说过，无非就是x,y轴平面上的移动。
transform: translateZ（）设置z轴上的移动，

如上图所示，很直观的能看目前红色的圆点在上面的平面上，接下来设置z轴上的位移属性。transform: translateZ（）有一个参数，正值向前移动，负值向后移动。如下图所示，圆点已经向后位移了。

当然X，Y，Z轴上可以同时位移transform: translate3d(a, b,c)三个参数分别代表3个方向上位移的距离。

沿着X轴旋转transform: rotateX();一个参数，正值向后旋转，负值向前旋转。

沿者Y轴旋转 transform: rotateY()一个参数，正值为从左往右，负值为从右往左。

沿着Z轴旋转，transform: rotateZ();一个参数

当然X，Y，Z轴上可以同时旋转transform: rotate3d(a, b,c,d)前面三个参数分别代表3个方向，第四个参数代表旋转的角度值。

transform:scale3d(x, y, z);
顾名思义，变大变小，小于1变小，大于1变大。可以为负值，反方向变形。缩放的中心点在左上角，可以用transform：origin：水平，垂直；来改变变形的中心点。

简单说了3d动画之后，接下来给大家说说好玩的css项目，立方体照片墙，大家可以先思考思考立方体怎么在平面上表示出来。如下图所示

还给大家补充补充动画。transition与animation的区别
animation：不需要事件触发，动画的灵活度更高，而transition是需要事件触发的，需要初始值和最终值，过渡。