CSS3 3D 変換

---

3D 変換

CSS3 では、3D 変換を使用して要素をフォーマットできます。

この章では、その 3D 変換メソッドのいくつかを学びます：

• rotateX()
• rotateY()

下の要素をクリックして、2D 変換と 3D 変換の違いを確認してください：

---

ブラウザサポート

表内の数字は、そのプロパティをサポートする最初のブラウザバージョン番号を示します。

-webkit-、-ms- または -moz- の直前の数字は、そのプレフィックス付きプロパティをサポートする最初のブラウザバージョン番号です。

プロパティ
transform	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
transform-origin (three-value syntax)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
transform-style	36.0 12.0 -webkit-	11.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
perspective	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
perspective-origin	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
backface-visibility	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-

rotateX() メソッド

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

---

rotateY() メソッド

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

---

変換プロパティ

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

プロパティ	説明	CSS
transform	要素に 2D または 3D 変換を適用します。	3
transform-origin	変換された要素の位置を変更できます。	3
transform-style	ネストされた要素が 3D 空間でどのように表示されるかを指定します。	3
perspective	3D 要素の透視効果を指定します。	3
perspective-origin	3D 要素の底部の位置を指定します。	3
backface-visibility	要素が画面に面していないときに表示するかどうかを定義します。	3

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)	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 変換要素の透視図を定義します。

その他の拡張