CSS参考手册
变换 | Transforms
变换函数 | 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轴平移一个元素。
规范
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 |
变换 | Transforms相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。