变换.jpg
单词：
transform：变换、转换、变形
origin：起源、源头
perspective：透视
translate：移动
scale：缩放
rotate：旋转
skew：倾斜、斜切
transform属性
定义：定义元素的变换。允许我们对元素进行旋转、缩放、移动或倾斜。
| 属性值 | 描述 |
|---|---|
| none | 不进行转换 |
| translateX() | 定义转换，只是用 X 轴的值。水平 |
| translateY() | 定义转换，只是用 Y 轴的值。垂直 |
| translateZ() | 定义 3D 转换，只是用 Z 轴的值。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
变换属性
| 属性 | 描述 |
|---|---|
| transform | 向元素应用 3D 转换。 |
| transform-origin | 允许你改变被转换元素的位置。 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 |
| perspective | 规定 3D 元素的透视效果。 |
| perspective-origin | 规定 3D 元素的底部位置。 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |
translate()函数
定义：translate()函数用于对元素进行移动变换。
语法
div{
transform:translateX(); /*水平*/
transform:translateY(); /*垂直*/
transform:translateZ();
}
perspective
perspective：透视的意思
定义：定义Z轴原点到屏幕的距离。开启3D空间上下文。(Z轴是垂直屏幕的轴)
特征：大透视小变换；小透视大变换。
语法
父元素{
perspective:none | px
}
属性值：
none：不开启透视。默认值
px：最小1px
透视
透视指在平面上描绘物体的的空间关系方法
透视的特点：
近大远小
近快远慢
近实远虚
