变换函数 | transform-function()
该<transform-function> CSS数据类型表示对元素外观的一个转换。通常可以用矩阵来表示，其结果是通过在每个点上使用矩阵乘法来确定的。
二维图形的坐标
笛卡尔坐标
在笛卡尔坐标系中，欧几里德空间的每个点用横坐标和纵坐标两个值来描述。在CSS（和大多数计算机图形）中，原点(0, 0)是任何元素的左上角。每个点使用矢量符号进行数学描述(x, y)。
每个线性函数使用2×2矩阵来描述，如下所示：
ac bd
通过使用线性函数和所讨论的每个点的矩阵乘法，创建一个变换：
请注意，可以在一行中应用多个转换：
用这种表示法，可以描述并综合最常见的转换：旋转，缩放或倾斜。（实际上，可以描述线性函数的所有变换。）复合变换按从右到左的顺序依次应用。然而，有一个重要的变换不是线性的，因此在使用这种表示法时必须特别加以说明：平移。平移矢量(tx, ty)必须分开表示，作为两个附加参数。
语法
该<transform-function>数据类型使用下面列出的变换函数之一。每个函数都以2D或3D方式应用在几何操作。
矩阵变换
matrix()把一个2D变换描述一个齐次的二维变换矩阵。matrix3d()将3D变换描述为4x4齐次矩阵。
透视
perspective()设置用户和z = 0平面之间的距离。
旋转
rotate()围绕2D平面上的一个固定点旋转一个元素。rotate3d()在3D空间中围绕固定轴旋转元素。rotatex()围绕水平轴旋转元素。rotatey()围绕垂直轴旋转元素。rotatez()围绕z轴旋转元素。
缩放（调整大小）
scale()在2D平面上向上或向下缩放元素。scale3d()在3D空间中向上或向下缩放元素。scalex()水平向上或向下缩放元素。scaley()垂直向上或向下缩放元素。scalez()沿z轴向上或向下缩放元素。
歪斜（扭曲）
skew()在2D平面上倾斜一个元素。skewx()在水平方向上倾斜元素。skewy()在垂直方向倾斜一个元素。
平移（移动）
translate()平移2D平面上的元素。translate3d()在3D空间中平移元素。translatex()水平平移元素。translatey()垂直平移元素。translatez()沿z轴平移一个元素。
规范
Specification | Status | Comment |
|---|---|---|
CSS Transforms Level 1The definition of 'transform' in that specification. | Working Draft | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | (Yes) | 3.5 (1.9.1)1 | 9.02 10.0 | 10.5 | 3.1 |
3D Support | 12.0 | 10.0 (10.0) | 10.0 | 15.0 | 4.0 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | 2.1 | (Yes) | (Yes) | (Yes) | 11.5 | 3.2 |
3D Support | 3.0 | (Yes) | (Yes) | (Yes) | 22 | 3.2 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
