CSS入門 | CSS3変形 | 2D Transform

変形(Transform)

CSS3では、transformプロパティを使用してHTML要素の形、サイズ、位置などを自由に変更できる。

transformプロパティは、HTML要素に対して次のような動作を提供する。

• その要素を移動する。
• その要素を回転させる。
• その要素のサイズを変更する。
• その要素を傾ける。
• その要素に上の4つの動作のうち必要な動作を一度に適用する。

CSS3では、transformプロパティを使用して2D変形(transform)と3D変形(transform)の両方を提供する。

CSS座標系

transformプロパティで使用するx、y、z座標は、次の図のような座標系に従う。CSS座標系で基準点はブラウザーの左上である。Z軸は立体的な方向で、モニターを見ているあなたがいる方向を指す座標軸である。また、各座標軸の矢印方向が正の方向であり、反対側が負の方向を指す。

CSS3 2D変形(transform)の対応バージョン

CSS3 2D変形(transform)に対応している主要Webブラウザーのバージョンは次のとおりである。また、ブラウザー別にベンダープレフィックス(vendor prefix)を使ってこの機能に最初に対応したバージョンも併記している。

2D変形(transform)

2D変形(transform)のために提供されるメソッド(method)は次のとおりである。

1. translate()
2. rotate()
3. scale()
4. skew()
5. matrix()

translate()メソッド

translate()メソッドは、現在位置からその要素を指定されたx軸とy軸の距離だけ移動させる。指定された距離が正の値ならその軸の正の方向へ、負の値ならその軸の負の方向へ移動させる。

<style>
    #trans {
        -webkit-transform: translate(100px, 50px);
        -ms-transform: translate(100px, 50px);
        transform: translate(100px, 50px);
    }
</style>

rotate()メソッド

rotate()メソッドは、その要素を指定された角度だけ時計回りまたは反時計回りに回転させる。指定された角度が正の値なら時計回りに、負の値なら反時計回りに回転させる。

<style>
    #rotate {
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
</style>

scale()メソッド

scale()メソッドは、その要素のサイズを指定された倍率だけ拡大または縮小する。指定された倍率が1より大きければサイズを拡大し、0より大きく1より小さければサイズを縮小する。

<style>
    #scale_inc {
        -webkit-transform: scale(1.5, 2);
        -ms-transform: scale(1.5, 2);
        transform: scale(1.5, 2);
    }
    #scale_dec {
        -webkit-transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        transform: scale(0.7, 0.7);
    }
</style>

skewX()メソッド

skewX()メソッドは、その要素を指定された角度だけx軸方向に傾ける。指定された角度が正の値ならx軸の正の方向へ、負の値ならx軸の負の方向へ傾ける。

<style>
    #skew_x {
        -webkit-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        transform: skewX(20deg);
    }
</style>

skewY()メソッド

skewY()メソッドは、その要素を指定された角度だけy軸方向に傾ける。指定された角度が正の値ならy軸の正の方向へ、負の値ならy軸の負の方向へ傾ける。

<style>
    #skew_y {
        -webkit-transform: skewY(20deg);
        -ms-transform: skewY(20deg);
        transform: skewY(20deg);
    }
</style>

skew()メソッド

skew()メソッドは、その要素を指定された角度だけ、それぞれx軸とy軸方向に傾ける。

<style>
    #skew {
        -webkit-transform: skew(20deg, 30deg);
        -ms-transform: skew(20deg, 30deg);
        transform: skew(20deg, 30deg);
    }
</style>

matrix()メソッド

matrix()メソッドは、すべての2D transformメソッドを1行で設定できるようにする。

このメソッドは、2D変形(transform)に関連する6つのパラメーターを持つ。matrix()メソッドのパラメーター順序は次のとおりである。

構文

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

<style>
    #matrix {
        -webkit-transform: matrix(0.7, 0, 0, 0.7, 1, 0);
        -ms-transform: matrix(0.7, 0, 0, 0.7, 0, 0);
        transform: matrix(2, 0.3, 0.2, 1.3, 150, 100);
    }
</style>

CSS3 2D transformプロパティ