CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
2D 转换
以下列出了所有的转换属性:
| Property | 描述 | CSS |
|---|---|---|
| transform | 适用于2D或3D转换的元素 | 3 |
| transform-origin | 允许您更改转化元素位置 | 3 |
transform属性2D变换方法：
- translate()：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。transform: translate(50px,100px);/* 标准语法 */
- rotate()：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。;transform: rotate(30deg);/* 标准语法 */
- scale()：用于增加或缩小元素的大小。transform: scale(2,3); /* 标准语法 */
- skew()：语法——transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。skewX(<angle>);表示只在X轴(水平方向)倾斜。skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
- matrix()：有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。代表了一个3*3的矩阵（线性代数）——变换矩阵，通过变换矩阵和点坐标（x,y）的乘积得出新坐标（x1,y1）。
3D转换
3D 转换方法
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换，使用 16 个值的 4x4 转换矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |