CSS 2D 変換
- 前のページ CSS ネットワークフォント
- 次のページ CSS 3D 変換
CSS 2D 変換
CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。
把鼠标悬停在下面的元素上，可以查看 2D 转换：
在本章中，您将学习如下 CSS 属性：
transform
浏览器支持
表格中的数字指注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
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);
}
以下の例では <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);
}
第二引数が指定されていない場合、デフォルト値は 0 です。したがって、以下の例では <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) | XとY軸に沿って2D傾斜変換を定義します。 |
| skewX(angle) | X軸に沿って2D傾斜変換を定義します。 |
| skewY(angle) | Y軸に沿って2D傾斜変換を定義します。 |
- 前のページ CSS ネットワークフォント
- 次のページ CSS 3D 変換
