CSS入門 | CSS3変形 | 3D Transform

変形(Transform)

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

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

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

3D変形(transform)

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

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

rotateX()メソッド

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

<style>
    #rotate_01 {
        -webkit-transform: rotateX(20deg);
        transform: rotateX(20deg);
    }
</style>

rotateY()メソッド

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

<style>
    #rotate_01 {
        -webkit-transform: rotateY(20deg);
        transform: rotateY(20deg);
    }
</style>

rotateZ()メソッド

rotateZ()メソッドは、その要素を指定された角度だけz軸を基準に回転させる。指定された角度が正の値ならz軸の正の方向へ、負の値ならz軸の負の方向へ回転させる。

<style>
    #rotate_01 {
        -webkit-transform: rotateZ(20deg);
        transform: rotateZ(20deg);
    }
</style>

translate3d()メソッド

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

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

rotate3d()、translate3d()、scale3d()メソッドのように立体的に見える3D変形に関連するメソッドは、遠近感を表現する基準を指定する必要がある。上の例では、perspective()メソッドを使用して遠近感を表現するために使うピクセル数を500pxに設定している。

CSS3 3D transformプロパティ

CSS3 3D transformメソッド