CSS3 2D 変形

❮ 前章へ次章へ ❯

CSS3 変形

CSS3 変形は、要素の移動（translate）、回転（rotate）、拡大・縮小（scale）、傾斜（skew）を可能にします。

変形とは、要素の形状、サイズ、位置を変える効果のことです。

CSS3 は、2D および 3D 変形をサポートします。

下の要素の上にマウスを乗せ、2D 変換と3D 変換の違いを見てください：

2D rotate

3D rotate

2D 変形のブラウザサポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

数字の後に続く -ms-、-webkit-、-moz- または -o- は、接頭辞付きで動作した最初のバージョンです。

プロパティ
transform	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-
transform-origin (two-value syntax)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-

CSS3 2D 変形

この章では、2d 変形メソッドを学習します：

translate()
rotate()
scale()
skewX()
skewY()
matrix()

チップ: 3D 変形メソッドについては次章をご覧ください。

translate() メソッド

translate() メソッドは、要素を現在の位置から（X軸とY軸に与えられたパラメータに従って）移動します。

次の例は、<div> 要素を現在の位置から、右へ 50 ピクセル、下に 100 ピクセル移動します：

例

div {
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari */
    transform: translate(50px,100px);
}

Try it Yourself ❯

rotate() メソッド

rotate() メソッドは、指定した角度に応じて要素を時計回りまたは反時計回りに回転します。

次の例は、<div> 要素を時計回りに 20 度回転させます：

例

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

Try it Yourself ❯

負の値を使用すると、要素を反時計回りに回転できます。

次の例は、<div> 要素を反時計回りに 20 度回転させます：

例

div {
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg);
}

Try it Yourself ❯

scale() メソッド

scale() メソッドは、要素のサイズを（width と height に指定したパラメータに応じて）拡大したり、縮小したりします。

次の例は、<div> 要素の元の幅の 2倍に、高さを 3倍に拡大します：

例

div {
    -ms-transform: scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3);
}

Try it Yourself ❯

次の例は、<div> 要素の元の幅と高さの半分に縮小します：

例

div {
    -ms-transform: scale(0.5,0.5); /* IE 9 */
    -webkit-transform: scale(0.5,0.5); /* Safari */
    transform: scale(0.5,0.5);
}

Try it Yourself ❯

skewX() メソッド

skewX() メソッドは、要素を指定した角度に X 軸方向へ傾斜させます。

次の例は、<div> 要素を X 軸方向へ 20 度傾斜させます：

例

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

Try it Yourself ❯

skewY() メソッド

skewY() メソッドは、要素を指定した角度に Y 軸方向へ傾斜させます。

次の例は、<div> 要素を Y 軸方向へ 20 度傾斜させます：

例

div {
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg);
}

Try it Yourself ❯

skew() メソッド

skew() メソッドは、要素を指定した角度に X 軸と Y 軸方向へ傾斜させます。

次の例は、<div> 要素を X 軸方向へ 20度、Y 軸方向へ 10度傾斜させます：

例

div {
    -ms-transform: skew(20deg, 10deg); /* IE 9 */
    -webkit-transform: skew(20deg, 10deg); /* Safari */
    transform: skew(20deg, 10deg);
}

Try it Yourself ❯

2 番目のパラメータが指定されていない場合は、その値がゼロになります。従って、次の例は、<div> 要素を X 軸方向へ 20度傾斜させます：

例

div {
    -ms-transform: skew(20deg); /* IE 9 */
    -webkit-transform: skew(20deg); /* Safari */
    transform: skew(20deg);
}

Try it Yourself ❯

matrix() メソッド

matrix() メソッドは、全ての 2D 変形メソッドを 1 つに統合します。

matrix() メソッドには、要素の回転、拡大・縮小、移動（translate）、傾斜を可能にする、数学関数に含まれる 6 つのパラメータを指定します：

パラメータは、次の通りです：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):

例

div {
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Try it Yourself ❯

練習問題で確認テスト！

Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯ Exercise 4 ❯

CSS3 変形プロパティ

次の表は、全 2D 変形プロパティの一覧です:

プロパティ	説明
transform	要素へ 2D または 3D 変形を適用する
transform-origin	変形した要素位置の変更を可能にする

2D 変形メソッド

Function	説明
matrix(n,n,n,n,n,n)	6つの値の matrix を使用して 2D translation を定義する
translate(x,y)	X軸と Y軸に沿って要素を移動する 2D translation を定義する
translateX(n)	X軸に沿って要素を移動する 2D translation を定義する
translateY(n)	Y軸に沿って要素を移動する 2D translation を定義する
scale(x,y)	要素の幅と高さを変更する 2D scale transformation を定義する
scaleX(n)	要素の幅を変更する 2D scale transformation を定義する
scaleY(n)	要素の高さを変更する 2D scale transformation を定義する
rotate(angle)	角度をパラメータで指定する 2D rotation を定義する
skew(x-angle,y-angle)	X軸と Y軸に沿って要素を傾斜させる 2D skew transformation を定義する
skewX(angle)	X軸に沿って要素を傾斜させる 2D skew transformation を定義する
skewY(angle)	Y軸に沿って要素を傾斜させる 2D skew transformation を定義する

❮ 前章へ次章へ ❯