通过rotateY设置的元素都会挤在同一个点上，需要拉开空间

三张图都在需要分布在不同的方向，呈现出一个圆形包围，这里可以采用translateZ处理。translateZ()函数是沿着垂直的Z轴方向平移，它可以让3D空间由前往后运作。假设自己作为观察者，观察着电脑屏幕上的某个元素，translateZ函数的正向值（越来越大的值）令元素更靠近观察者，负向值则远离观察者。

translateZ的计算公式

可以通过translateZ改变元素的透视距离，那么到底应该设置多少合适呢？

我们只需要求出边界到中心的距离，让3个图片围成一个圆形，那么每一个面的角度就是120°，长度是200px。换句话说一个面是有2个60°的直边三角形组成的。那么每一个直边三角形就是100px了，translateZ是直径距离，所以需要算出直边三角形的"邻边"距离

100 / Math.tan(60 / 180 * Math.PI) ≈ 57

实际上，我们会根据这个57px的距离会有一定的浮动，当然最终可以转化成rem去计算了

旋转原理

布局完成后旋转就比较简单了，只需要控制父节点的rotateY角度变化就可以了，注意因为是3张图，所以每次变化的角度应该是120°，这样才能保持每张图旋转的角度的正确性。具体可以参考右边代码的实现