理解变形动画

perspective

参考文档 (opens new window)

1. perspective的意思是透视，定义的是人眼到屏幕之间的距离，比如：

   div { 
     perspective: 800px; /* 模拟人眼距离屏幕800px像素距离在看元素 */
   }
   

2. 人眼看到的实际上是元素在屏幕上的投影，因而需要perspective定义一个观察点，然后才能够根据元素在Z轴上的距离改变投影的大小。

3. 放在父元素上

perspective-origin

1. 调整人眼观察的位置，默认值是center,center，表示在屏幕正中间。

2. 放在父元素上

3. 调整视角，比如：

   div {
     perspective-origin: 100px 100px; /* left 距离 top 距离 */
     perspective-origin: left top; /* left right bottom top 10% 10px */
   }
   

4. 注意和transform-origin的区分，吃过亏的。