变换函数 | transform-function()

transform-function()

该<transform-function> CSS数据类型表示对元素外观的一个转换。通常可以用矩阵来表示，其结果是通过在每个点上使用矩阵乘法来确定的。

二维图形的坐标

可以使用各种坐标模型来描述任何转换。最常见的是笛卡尔坐标系和齐次坐标。

笛卡尔坐标

在笛卡尔坐标系中，欧几里德空间的每个点用横坐标和纵坐标两个值来描述。在CSS（和大多数计算机图形）中，原点(0, 0)是任何元素的左上角。每个点使用矢量符号进行数学描述(x, y)。

每个线性函数使用2×2矩阵来描述，如下所示：

ac bd

通过使用线性函数和所讨论的每个点的矩阵乘法，创建一个变换：

请注意，可以在一行中应用多个转换：

用这种表示法，可以描述并综合最常见的转换：旋转，缩放或倾斜。（实际上，可以描述线性函数的所有变换。）复合变换按从右到左的顺序依次应用。然而，有一个重要的变换不是线性的，因此在使用这种表示法时必须特别加以说明：平移。平移矢量(tx, ty)必须分开表示，作为两个附加参数。

莫比乌斯在射影几何的齐次坐标系产生3×3的变换矩阵，虽然更加复杂和而且对非专业人士更加难以理解，但它不受平移限制的影响，因为这种变换在该代数体系下可以表示为线性函数，从而消除对特殊情况的额外考虑。

语法

该<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轴平移一个元素。

规范

Browser compatibility