CSS 2D 转换

CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。

把鼠标悬停在下面的元素上，可以查看 2D 转换：

在本章中，您将学习如下 CSS 属性：

• transform

浏览器支持

表格中的数字指注明了完全支持该属性的首个浏览器版本。

CSS 2D 转换方法

通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：

• translate()

• rotate()

• scaleX()

• scaleY()

• scale()

• skewX()

• skewY()

• skew()

• matrix()

提示：您将在下一章中学习 3D 转换。

translate() 方法

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

下面的例子把 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：

实例

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

亲自试一试

rotate() 方法

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

下面的例子把 <div> 元素顺时针旋转 20 度：

实例

div {
  transform: rotate(20deg);}

亲自试一试

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

下面的例子把 <div> 元素逆时针旋转 20 度：

实例

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

亲自试一试

scale() 方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

下面的例子把 <div> 元素增大为其原始宽度的两倍和其原始高度的三倍：

实例

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

亲自试一试

下面的例子把 <div> 元素减小为其原始宽度和高度的一半：

实例

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

亲自试一试

scaleX() 方法

scaleX() 方法增加或减少元素的宽度。

下面的例子把 <div> 元素增大为其原始宽度的两倍：

实例

div {
  transform: scaleX(2);}

亲自试一试

以下例子把 <div> 元素缩减为其原始宽度的一半：

实例

div {
  transform: scaleX(0.5);}

亲自试一试

scaleY() 方法

scaleY() 方法增加或减少元素的高度。

下面的例子把 <div> 元素增大到其原始高度的三倍：

实例

div {
  transform: scaleY(3);}