CSS3的transform属性（二）

前面介绍了基本的变形方式（旋转，移动，缩放，倾斜）。现在来介绍和这些变形方式相关联的属性。

transform-origin

每个元素都有一个形变中心点。元素的旋转缩放等形边都是基于形变中心点变化的。形变中心点的坐标是以元素的左上角为坐标原点的。
上图

---

backface-visibility

backface-visibility此属性定义元素旋转到背面是否可见。
默认值为visible，表示可见
hidden表示不可见

---

perspective

此属性定义3D视距。
我们到平面图形上的点的视距都相同，所以才会是平面效果。而立体效果就是因为不同视距产生的，俗称近大原小。
perspective的值默认为none，没有视距，所有点的视距相同，所以即使绕X轴旋转的元素，看起来只是变窄，而没有3d效果。定义了perspective后，旋转的元素上的点就会有不同的视距，近大远小的效果就会产生。
当perspective的值越大时，视距的差别就越不明显。如10000001，10000002也可以认为视距相同。当perspective的值越小时，视距的差别就显得越大。一般500px值也就合适了，还是要看元素视距的差值。
注意：此属性必须定义在父元素上才会有效果。

transform: perspective(100px) rotateX(30deg)
这种写法指定其父元素的视距，不过视距只针对当前元素。而且必须必须写在变形方式的前面。
直接在父元素上定义perspective: 100px，会使所有子元素共享3D视距

perspective-origin
定义观察点的位置。默认为中心

transform-style
transform-style属性确定元素的子元素是否位于3D空间中，还是在该元素所在的平面内被扁平化。
默认值为flat，子元素在2D平面上。preverse-3d表示子元素在3D空间内。

当元素旋转时，它的参考坐标会跟着旋转