CSS 3D変換

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

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

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

• transform

ブラウザのサポート

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

CSS 3D Transformsメソッド

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

• rotateX()
• rotateY()
• rotateZ()

rotateX()メソッド

rotateY()メソッド

rotateZ()メソッド

CSS変換プロパティ

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

CSS 3D変換メソッド

関数	説明
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変換された要素の透視図を定義します。