transform 属性 实现旋转木马效果

…

复制代码

效果图 

• 我们对方块设置了按Y轴进行旋转，看见的只是方块变小，没有按Y轴旋转。是因为现在还是处于2D视角，没有透视效果。

加入 perspective 属性

---

1. perspective 属性 指定了观察者与 z = 0 平面的距离，使具有三维位置变换的元素产生透视效果。

2. perspective 属性只影响 3D 转换元素。

3. 透视点是在浏览器的前方，所以perspective 属性设置后值后，元素会进大远小。

4. 默认情况下，消失点位于元素的中心(视点)，但是可以通过设置 perspective-origin 属性来改变其位置。

…

.main{

…

-webkit-perspective: 800px;

-moz-perspective: 800px;

perspective: 800px;

}</