CSS 2D 转换 transform translate() rotate() scale() skew() matrix()

CSS transforms 属性允许 移动、旋转、缩放和倾斜元素。

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

translate() 方法

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

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

rotate() 方法

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

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

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

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

 

scale() 方法

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

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

 

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

在讲 skew() 前，先来了解一下CSS3的斜切坐标系：

skewX() 方法

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

下例把 <div> 元素沿X轴倾斜 20 度（垂直方向X轴，逆时针旋转）

skewY() 方法

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

下例把 <div> 元素沿 Y 轴倾斜 20 度（按照水平方向Y轴，顺时针旋转）

skew() 方法

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

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

垂直的x轴逆时针旋转20度，水平的y轴顺时针旋转10度

如果未指定第二个参数，则值为零。因此，下例使 <div> 元素沿 X 轴倾斜 20 度：

div {
  transform: skew(20deg);
}

matrix() 方法

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

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

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

 

 

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 轴。