了解单词
- transform:变换，转换，变形
- origin：（窝瑞陈）允许你改变被转换元素的位置。
- perspective：（破四潘科体悟）：规定 3D 元素的透视效果。
- translate：（穿四累特）移动（本意是翻译）
- scale：（死给哦）缩放
- rotate：（肉tei的）旋转
- skew：（四给吴）倾斜，斜切
变换属性
|--|--|--|--|
| 属性 | 描述 |
| transform | 向元素应用 3D 转换。 |
| transform-origin | 允许你改变被转换元素的位置。 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 |
| perspective | 规定 3D 元素的透视效果。 |
| perspective-origin | 规定 3D 元素的底部位置。 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |
1.透视
透视指在平面上描述物体的空间关系的方法。
透视的特点：
1.近大远小
2.近快远慢
3.近实远虚
2.transform
定义：定义元素的变换：移动、旋转、缩放和倾斜四种。
移动
属性值：
- translate() ： translateX()和translateY()的简写属性值，第一个值沿X轴（水平轴）发生位置移动，第二个值沿Y轴（垂直轴）发生位置移动。
- translateX()：元素沿X轴（水平轴）发生位置移动
- translateY()：元素沿Y轴（垂直轴）发生位置移动
-
translateZ()：元素沿Z轴（垂直于屏幕的轴）发生位置移动，translateZ() CSS函数沿着z轴在三维空间中重新定位元素,即,从观察者的角度而言更近或者更远。这个变换是由一个<length>元素定义的,它指定元素向内或向外移动的距离。
div{ tramsform： translate() | translateX() | translateY() }
注：接受负值。
旋转
单位：deg
- rotate()： 简写属性，方法根据给指定的角度顺时针或逆时针旋转元素。
- rotateX()：元素沿X轴（水平轴）发生旋转
- rotateY()：元素沿Y轴（垂直轴）发生旋转
- rotateZ()：元素沿Z轴（垂直于屏幕的轴）发生旋转
缩放
单位：deg
- scale()： 简写属性，进行水平垂直双向缩放。
- scaleX()：元素沿X轴（水平轴）进行缩放
- scaleY()：元素沿Y轴（垂直轴）进行缩放
- rotateZ()：缩放Z轴
斜切
单位：deg
- skew()： 简写属性，进行水平垂直双向斜切。
- skewX()：元素沿X轴（水平轴）进行斜切
- skewY()：元素沿Y轴（垂直轴）进行斜切
复合属性matrix()
定义：matrix() 方法把所有 2D 变换方法组合为一个。
matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。
参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
示例：
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
3.perspective
定义：定义Z轴原点到屏幕的距离。Z轴是垂直于屏幕的轴。（定义在父元素身上。）
语法：
.container{
perspective: none;/*不开启3D视角*/
perspective: 500px;/*坐标原点距离屏幕的距离*/
}
属性值：
none:不开启透视 （默认）
number ：开启透视，坐标原点距离屏幕的距离，以像素为单位。最小值是1px，不可以取负值。
注：大透视，小变换，小透视，大变换。换而言之（number值越大，translateZ()函数的变换效果越不明显。）
4.perspective-origin
定义：透视源：设置透视视角位置。
语法：
.container{
perspective-origin: left | bottom | top | right | center;
}
属性值：
注：可以设置左上，右上，左下，右下，中上，中下等组合视角。
