CSS3 3D変換

3Dトランスフォーム

CSS3を使用すると、フォーマット変換素子に3Dを使用することができます。

この章では、3D変換方法のいくつかを学びます。

2Dと3Dの変換変換の間の違いを確認するために、次の要素をクリックしてください。

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-

その要素がX軸方向の回転角度の指定された番号の前後に回転X（）メソッド、。

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

その要素がY軸での回転の度の与えられた数の周りに回転Y（）メソッド、。

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

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

プロパティ	説明	CSS
変換	要素2Dまたは3D変換に適用されます。	3
変換原点	それはあなたが変換される要素の位置を変更することができます。	3
変換スタイル	提供は、3D空間でどのように表示されるかネストされた要素でした。	3
視点	引当金3D遠近効果素子。	3
透視起源	3次元要素の底面の所定位置。	3
背面視認性	ない画面の顔に表示されている場合の要素を定義します。	3

関数	説明
Matrix3D（N、N、N、N、N、N、 N、N、N、N、N、N、N、N、N、N）	3D変換は、16個の値4×4行列を使用して定義されました。
translate3d（X、Y、Z）	定義された3D変換。
移動X（x）は、	X軸の値のみを使用して、3D変換を定義します。
移動Y（Y）	Y軸の値のみを使用して、3D変換を定義します。
translateZ（Z）	Z軸の値のみを使用して、3D変換を定義します。
scale3d（X、Y、Z）	3Dスケール変換を定義します。
scaleXプロパティ（x）は、	3Dスケール変換は、X軸の所定の値によって定義されます。
scaleYの（Y）	3Dスケール変換は、Y軸方向の所定の値によって定義されます。
scaleZ（Z）	3Dスケール変換は、Z軸方向の所定の値によって定義されます。
rotate3dを（X、Y、Z、角度）	3D回転を定義します。
回転X（角度）	X軸3D回転に沿って定義されます。
回転Y（角度）	Y軸3D回転に沿って定義されます。
回転Z（角度）	Z軸3D回転に沿って定義されます。
視点（N）	変換要素の定義の3次元斜視図です。