浅谈css中的animation

之前看一个博主的3D图书加轮播图就有点手痒，想着自己也搞一个3D的图书，再加上翻页效果，最后捣鼓了好半天才堪堪将3D图书效果做出来，接下来是一些书写途中的经验分享

1、scale的时候，3D坐标系也是会跟着改变的，也就是我们常常说的视角会跟着旋转

而且，Z轴是指向纸面外的！！！（由于一开始这个记错了，然后一直写不对😭😭😭）

2、一定要设置所有的面都是中心对齐

不然就会有一个非常令人烦躁的结果！！！

也就是所有的html元素最先，如果不特意改变都是按照文件流的排列方式，写一个放一个，后面的排到前一个的后面，这个时候旋转之后平移之前就会出现类似于下面这种情况

矩形的各个面是分离的

由于我旋转的时候没有设置中心点（translate-origin），而默认中心点都是我们即将旋转的图形的中心点，所以所以，最重要的来了，如果没有设置中心对齐，那么旋转之后再将图像平移到与其他面对齐的时候的距离就让人很烦！！！（其实也就是没有那么规律，也不是很烦，是很麻烦！！！）

3、对于正方形，旋转之后想要做成正方体的效果，需要将旋转之后的面平移到与我们固定的那一面相接，此时移动的距离就非常好算，直接就是想要的正方体的长度的一半

就像这样

最终出来的效果就是这样

4、但是如果是长方体，也就是我想实现的那种长方体的书本效果

就会出现这种情况

也就是相对的面的平移距离之和等于其所在的邻面的长度