变形
定义
变形(Transform-)属性是一些对HTML元素进行线性仿射变形相关的CSS属性。
概述
变形包括2D变形和3D变形。
具体常用的2D变形有以下5种：
- 伸缩(scale)
使元素以相同的缩放中心点和基数沿水平方向、垂直方向或两个方向同时缩放。其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。 - 扭曲(skew)
使元素按一定的角度值在水平方向、垂直方向或两个方向同时扭曲变形。 - 旋转(rotate)
使元素以某个基点按一定的角度值进行旋转。 - 移动(translate)
使元素沿水平方向、垂直方向或两个方向同时移动。 - 矩阵(matrix)
使元素按矩阵进行2D变形。
3D变形在2D变形的基础上增加了z坐标的变换。
列表
| 元素 | 描述 | 版本 |
|---|---|---|
| transform | transform 属性规定元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。值包含（translate()，scale()，rotate(),skew(),perspective()等）。 | 3 |
| <transform-function> | 规定一个为了改变元素显示效果而应用到该元素上的函数，这些变换函数通常代表一类矩阵，最终如何显示出来决定于这些函数矩阵和元素每个点相乘的结果。 | ３ |
| transform-origin | transform-origin 属性更改元素变形的原点。例如，rotate()的transform-origin 是旋转的中心点 (这个属性的应用原理是先用这个属性的负值translate该元素，进行变形，然后再用这个属性的值把元素translate回去)。 | 3 |
| transform-style | transform-style规定该元素的嵌套元素如何在3D空间中呈现。 | 3 |
变更点
变形属性全部是CSS3新增加的。