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）
2、观察点位置图解（图片来自w3c）
persective两种设置方式的区别
坐标原点:transform-origin
1、 默认值： 50% 50% (0px)
3、百分比：基于元素宽高计算
4、百分比、长度：以元素的左上角为起点。
（A percentage for the horizontal offset is relative to the width of the bounding box. A percentage for the vertical offset is relative to height of the bounding box. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box.）
transform-style
preserve-3d可以实现应用此属性的元素和子代元素共享同一个3D空间，从而实现元素交叉的效果（再补充）
The transform-style property allows 3D-transformed elements and their 3D-transformed descendants to share a common three-dimensional space, allowing the construction of hierarchies of three-dimensional objects.
旋转
**旋转要素：旋转轴（3D）／旋转中心（2D）、旋转角度、旋转方向
**正负区分：正时针为正逆时针为负（面向参考轴，以rotateZ为例，日程中我们所说的顺时针其实就是面向z轴以x,y轴所构成的二维平面的顺时针）确定一次旋转的3要素：参考轴（rotateX、rotateY、rotateZ）、参考轴位置（transform-origian）、旋转方向(deg值正负)
**3D旋转轴：
1、rotate3d(x,y,x,deg)中的（x,y,z）唯一确定了三维空间中的一个点，这个点与坐标中心点的连线就是旋转轴
2、过直线外一点有且仅有一条直线和这条直线平行，所以要想实现旋转轴不过原点可以与位移效果相结合（再讨论）
顺序问题
1、transform变换其实是坐标系变换，坐标系变换是矩阵乘法，不满足交换律，所以顺序不同结果是不一样的
2、从左向右依次应用（Multiply by each of the transform functions in transform property from left to right）