CSS3 2D 转换

Created: October-16, 2018

CSS3 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);  /* Standard syntax */    
}

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);  /* Standard syntax */    
}

函数 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 是以 deg 为单位的值。你可以交换 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);  /* Standard syntax */
}

但是，当一次执行多个转换时，使用单个转换函数并按顺序列出它们会更方便，如下所示：

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);  /* Standard syntax */    
}

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 变换。

元素的二维转换

使用 CSS 变换和变换函数

translate() 函数

rotate() 函数

scale() 函数

skew() 函数

matrix() 函数