CSS 3D変換

CSSは3D変換もサポートしています。

以下の要素にマウスを合わせると、2Dと3Dの変換の違いが表示されます。

2D回転

3D回転

この章では、次のCSSプロパティについて学習します。

ブラウザのサポート

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

プロパティ
transform	36.0	10.0	16.0	9.0	23.0

CSSでtransformプロパティでは、次の3D変換方法を使用できます。

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

#myDiv{ transform: rotateX(150deg); }

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

#myDiv{ transform: rotateY(150deg); }

rotateZ()メソッドは、指定された角度でZ軸を中心に要素を回転させます。

#myDiv{ transform: rotateZ(90deg); }

次の表に、すべての3D変換プロパティを示します。

プロパティ	説明
transform	要素に2Dまたは3D変換を適用します。
transform-origin	ネストされた要素が3D空間でどのようにレンダリングされるかを指定します。
transform-style	3D要素がどのように表示されるかについてのパースペクティブを指定します。
perspective	3D要素の下の位置を指定します。
perspective-origin	画面に面していないときに要素を表示するかどうかを定義します。

関数	説明
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	16個の値の4x4マトリックスを使用して、3D変換を定義します。
translate3d(x、y、z)	3D変換を定義します。
translateX(バツ)	X軸の値のみを使用して、3D移動を定義します。
translateY(y)	Y軸の値のみを使用して、3D移動を定義します。
translateZ(z)	Z軸の値のみを使用して、3D移動を定義します。
scale3d(x、y、z)	3Dスケール変換を定義します。
scaleX(x)	X軸の値を指定して3Dスケール変換を定義します。
scaleY(y)	Y軸の値を指定して3Dスケール変換を定義します。
scaleZ(z)	Z軸の値を指定して3Dスケール変換を定義します。
rotate3d(x、y、z、angle)	3D回転を定義します。
rotateX(angle)	X軸に沿った3D回転を定義します。
rotateY(angle)	Y軸に沿って3D回転を定義します。
rotateZ(angle)	Z軸に沿った3D回転を定義します。
perspective（n)	3D変換された要素の透視図を定義します。