CSS3 3D 変形

3D 変形

CSS3は、3D 変形 を使用して、要素のフォーマットを可能にします。

この章では、下記 3D transform メソッドを学習します:

• rotateX()
• rotateY()

2D 変形と 3D 変形の違いを見るため、下の要素をクリックしてください:

ブラウザ・サポート

Internet Explorer、Firefox 及び Opera は、3D transform メソッドをサポートしていません。

Chrome 及び Safari は、接頭辞 -webkit- を必要とします。

rotateX() メソッド

rotateX() メソッドよって、要素は指定した角度でX軸を中心に回転します。

例

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

Try it yourself »

rotateY() メソッド

rotateY() メソッドよって、要素は指定した角度でY軸を中心に回転します。

例

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

Try it yourself »

Transform プロパティ

次の表は、全 transform プロパティの一覧です:

3D Transform メソッド