CSS3 2D转换

CSS3 2D 转换是指定义元素平面上的变换，主要表现为旋转，平移，缩放等效果。

例如下例，鼠标悬停到元素上，通过js控制元素开始进行顺时针旋转。

CSS3 transform

CSS3 中通过设置元素的 transform 属性值来实现元素的不同2D转换。

浏览器支持

表格中的数字指表示支持该属性的浏览器首个版本。

属性	Chrome	IE	Firefox	Safari	Opera
transform	36.0	10.0	16.0	9.0	23.0

transform 属性

下面是 transform 属性值内容， 2D 转换方法如下：

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

CSS 2D 转换示例

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);
}

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);
}

例如，下面的例子把 <div> 元素缩减为其原始高度的一半：

示例

div {
  transform: scaleY(0.5);
}

skewX() 方法

skewX() 方法使元素沿 X 轴方向倾斜给定角度。

例如，下例中把 <div> 元素沿X轴倾斜 20 度：

示例

div {
  transform: skewX(20deg);
}

skewY() 方法

skewY() 方法使元素沿 Y 轴方向倾斜给定角度。

例如，下例中把 <div> 元素沿 Y 轴倾斜 20 度：

示例

div {
  transform: skewY(20deg);
}

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

例如，下面的例子中使 <div> 元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：

示例

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

加入未指定skew方法的第二个参数，则默认值为零。因此，下例中使 <div> 元素沿 X 轴倾斜 20 度：

示例

div {
  transform: skew(20deg);
}

matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

示例

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

CSS 转换属性

下表列出了所有 2D 变换属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。

CSS 2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。