CSS 二维变换

CSS 可以通过 transform 属性在二维空间或者三维空间移动、旋转、缩放和倾斜元素，本文讨论二维变换相关的操作。

CSS 二维变换函数

transform 属性的值为一个或多个预定义的 CSS 变换函数。可用的变换函数如下：

• translate()：
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

**提示：**您将在下一章中了解 3D 变换。

translate() 函数

translate() 函数将元素从其当前位置移动指定的坐标位置。

将元素向右移动 50px，向下移动 100px：

div {
  transform: translate(50px, 100px);
}

rotate() 函数

rotate() 函数根据给定的度数顺时针或逆时针旋转元素。默认根据元素的中心点进行旋转。

将元素顺时针旋转 20 度：

div {
  transform: rotate(20deg);
}

使用负值将逆时针旋转元素。

将元素逆时针旋转 20 度：

div {
  transform: rotate(-20deg);
}

scale() 函数

scale() 函数可以按比例放大或缩小元素的尺寸。

将元素的宽度变为原来的 2 倍，高度变为原来的 3 倍：

div {
  transform: scale(2, 3);
}

将元素宽度和高度减半：

div {
  transform: scale(0.5, 0.5);
}

scaleX() 函数

scaleX() 函数可以按比例放大或缩小元素宽度。

将元素的宽度增加为其原来的 2 倍：

div {
  transform: scaleX(2);
}

将元素的宽度减小为原来的一半：

div {
  transform: scaleX(0.5);
}

scaleY() 函数

scaleY() 函数可以按比例放大或缩小高度。

将元素高度变为原来的 3 倍：

div {
  transform: scaleY(3);
}

将元素的高度变为原来的一半：

div {
  transform: scaleY(0.5);
}

skew() 函数

skew() 函数将元素沿 X 轴和 Y 轴倾斜或者拉伸给定的角度。默认以元素的中心点为中心。

将 <div> 元素 X 方向倾斜 20 度，Y 方向倾斜 10 度：

div {
  transform: skew(20deg, 10deg);
}

skewX() 函数

skewX() 函数将元素沿 X 轴倾斜或者拉伸给定的角度。默认以元素的中心点为中心。

将 <div> 元素 X 轴方向倾斜 20 度：

div {
  transform: skewX(20deg);
}

skewY() 函数

skewY() 函数将元素沿 Y 轴倾斜或者拉伸给定的角度。默认以元素的中心点为中心。

将 <div> 元素 Y 轴方向倾斜 20 度：

div {
  transform: skewY(20deg);
}

matrix() 函数

matrix() 函数整合了所有的二维变换函数。matrix() 函数有六个参数，允许您旋转、缩放、移动（平移）和倾斜(拉伸)元素。

matrix() 语法：

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

二维变换的浏览器支持情况

表中列出了完全支持 transform 属性的第一个浏览器版本。

CSS 变换属性

下表列出了所有二维变换属性：

CSS 二维变换函数