CSS 2D转换

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

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

示例原型：

1.1translate() 方法

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

 

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

.translate {
transform: translate(100px, 40px);
}

 效果：

1.2rotate() 方法

 

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

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

.rotate-positive {
transform: rotate(20deg);
}

 效果：

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

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

.rotate-negative {
transform: rotate(-20deg);
}

效果：

1.3scale() 方法

 

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

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

.scale-big {
transform: scale(2, 3);
}

 

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

.scale-small {
transform: scale(0.5, 0.5);
}

效果：

1.4scaleX() 方法

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

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

.scaleX-double {
transform: scaleX(2);
}

效果：

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

.scaleX-half {
transform: scaleX(0.5);
}

 效果：

1.5scaleY() 方法

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

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

.scaleY-triple {
transform: scaleY(3);
}

效果：

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

.scaleY-half {
transform: scaleY(0.5);
}

 效果：

1.6skewX() 方法

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

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

.skewX {
transform: skewX(20deg);
}

效果：

 1.7skewY() 方法

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

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

.skewY {
transform: skewY(20deg);
}

效果：

1.8skew() 方法

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

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

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

效果：

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

.skew-one {
transform: skew(20deg);
}

 1.9matrix() 方法

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

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

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

实例：

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

效果：