transform的几个知识点

transform 的几个知识点

三维坐标系

1、w3c中给出了三维空间的坐标系，z轴指向屏幕外
2、 CSS3 transform 变换使用的是元素自身坐标系

位移

**translateZ(): 需要给父标签添加透视才能观察到

透视

透视是通过对元素中靠近观察者的点进行放大，远离观察者的点收缩，使得元素呈现出具有深度的效果
w3c: Perspective causes vertices that have positive Z coordinates (closer to the viewer) to be scaled up in X and Y, and those further away (negative Z coordinates) to be scaled down, giving an appearance of depth.

透视的两个要素：1、焦点距离视窗得距离（perspective）2、观察点（perspective-origin）
1、结合translateZ理解透视（实例），图解如下（图片来自w3c）