css动画

效果图： 思路： 1、一个容器，装6个子容器放6张图（我是采用的ul列表）

2、调整六张图的位置形成一个正方形

其中的transform: translateZ(-200px) rotateZ(180deg);就是调整图片位置的，三位感觉不强的可以拿个手机比作一张图进行旋转平移 3、设置动画，让这个盒子旋转起来

rotate3d(x, y, z, a) 在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并且通过变换源点传递（即通过 transform-origin CSS 属性定义）。如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果。

4、设置鼠标悬浮样式 此处b2的hover需要与b2的旋转同步，否则就会无效

需要注意的一些问题： [1] 3d动画记得设置3d属性transform-style: preserve-3d; [2] 如何重置3d定位中心transform-origin:center center; [3] left:0; right:0; top:0; bottom:0; margin：auto; 会使text居中，如果text没有宽高，则会继承父集的宽高，适合body 内的遮罩。本文的ul页面居中就是用了这个方法 [4] 关于三维坐标系：

x正方向指向屏幕右边，y正方向指向屏幕下方，z正方向指向你自己

图片来自：博客css动画2d，3d旋转平移，博主讲的比较详细

[5] 如果有多个旋转是一定要同步，不然无法达到预设效果，比如本次实例中：鼠标悬浮会展开，展开是在这个方向上向外平移，但是如果只进行平移操作，就会发现无效，原因就是盒子在旋转如果hover属性没有设置旋转属性导致无法同步

资源同步上传，欢迎参考交流