CSS3 2D 转换
CSS3 2D 转换功能允许元素在 2D 空间中进行转换。
元素的2D 转换
使用 CSS3 2D 转换功能，您可以对二维空间中的元素执行基本的转换操作，例如移动、旋转、缩放和倾斜。
转换后的元素不会影响周围的元素，但可以重叠它们，就像绝对定位的元素一样。 但是，转换后的元素仍会在布局中的默认（未转换）位置占据空间。
使用 CSS 转换和转换函数
CSS3 transform 属性使用转换函数来操作元素使用的坐标系，以应用转换效果。
以下部分描述了这些转换函数：
translate() 函数
沿 X 和 Y 轴将元素从其当前位置移动到新位置。 这可以写成 translate(tx, ty)。 如果未指定 ty，则假定其值为零。
img {
-webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera */
-moz-transform: translate(200px, 50px); /* Firefox */
-ms-transform: translate(200px, 50px); /* IE 9 */
transform: translate(200px, 50px); /* 标准语法 */
}translate(200px, 50px) 函数将图像沿正 x 轴水平移动 200 像素，沿正 y 轴垂直移动 50 像素。
rotate() 函数
rotate() 函数将元素围绕其原点（由 transform-origin 属性指定）旋转指定角度。 这可以写成 rotate(a)。
img {
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(30deg); /* Firefox */
-ms-transform: rotate(30deg); /* IE 9 */
transform: rotate(30deg); /* 标准语法 */
}rotate(30deg) 函数将图像绕其原点顺时针旋转 30 度角。 您可以使用负值逆时针旋转元素。
scale() 函数
scale() 函数增加或减少元素的大小。 它可以写成scale(sx, sy)。 如果未指定 sy，则假定它等于 sx。
img {
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
-moz-transform: scale(1.5); /* Firefox */
-ms-transform: scale(1.5); /* IE 9 */
transform: scale(1.5); /* Modern Browsers */
}scale(1.5) 函数将图像的宽度和高度按比例缩放 1.5 倍至其原始大小。 scale(1) 或 scale(1, 1) 函数对元素没有影响。
skew() 函数
skew() 函数将元素沿 X 和 Y 轴倾斜指定的角度。 它可以写成skew(ax, ay)。 如果未指定 ay，则假定其值为零。
img {
-webkit-transform: skew(-40deg, 15deg); /* Chrome, Safari, Opera */
-moz-transform: skew(-40deg, 15deg); /* Firefox */
-ms-transform: skew(-40deg, 15deg); /* IE 9 */
transform: skew(-40deg, 15deg); /* Modern Browsers */
}函数 skew(-40deg, 15deg) 将元素沿
x 轴水平倾斜 -40 度，沿 y 轴垂直倾斜 15 度。
matrix() 函数
matrix() 函数可以一次执行所有 2D 转换，例如平移、旋转、缩放和倾斜。 它采用 矩阵 形式的六个参数，可以写成 matrix(a, b, c, d, e, f)。 以下部分将向您展示如何使用 matrix() 来表示每个 2D 转换函数。
translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);— 其中tx和ty是水平和垂直平移值。rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);— 其中 a 是以度为单位的值。 您可以交换sin(a)和-sin(a)值来反转旋转。 您可以执行的最大旋转为 360 度。scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);— 其中sx和sy是水平和垂直缩放值。skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0);— 其中ax和ay是以度为单位的水平和垂直值。
这是使用 matrix() 函数执行 2D 转换的示例。
img {
-webkit-transform: matrix(0, -1, 1, 0, 200px, 50px); /* Chrome, Safari, Opera */
-moz-transform: matrix(0, -1, 1, 0, 200px, 50px); /* Firefox */
-ms-transform: matrix(0, -1, 1, 0, 200px, 50px); /* IE 9 */
transform: matrix(0, -1, 1, 0, 200px, 50px); /* 标准语法 */
}但是，当一次执行多个转换时，使用单独的转换函数并按顺序列出它们会更方便，如下所示：
img {
-webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* Chrome, Safari, Opera */
-moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* Firefox */
-ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* IE 9 */
transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* 标准语法 */
}2D 转换函数
下表提供了所有 2D 转换函数的简要概述。
| 函数 | 说明 |
|---|---|
translate(tx,ty) |
将元素沿 X 和 Y 轴移动给定的量。 |
translateX(tx) |
将元素沿 X 轴移动给定的量。 |
translateY(ty) |
沿 Y 轴将元素移动给定的量。 |
rotate(a) |
按照 transform-origin 属性的定义，围绕元素的原点将元素旋转指定的角度。 |
scale(sx,sy) |
按给定的量向上或向下缩放元素的宽度和高度。 函数 scale(1,1) 无效。 |
scaleX(sx) |
按给定的量向上或向下缩放元素的宽度。 |
scaleY(sy) |
按给定的量向上或向下缩放元素的高度。 |
skew(ax,ay) |
沿 X 和 Y 轴以给定角度倾斜元素。 |
skewX(ax) |
沿 X 轴以给定角度倾斜元素。 |
skewY(ay) |
沿 Y 轴将元素倾斜给定角度。 |
matrix(n,n,n,n,n,n) |
以由六个值组成的转换矩阵的形式指定 2D 转换。 |