CSS 3D変換
CSS 3D変換
CSSは3D変換もサポートしています。
以下の要素にマウスを合わせると、2Dと3Dの変換の違いが表示されます。
2D回転
3D回転
この章では、次のCSSプロパティについて学習します。
transform
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
|
プロパティ |
|||||
|---|---|---|---|---|---|
| トランスフォーム | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS 3D Transformsメソッド
CSSでtransformプロパティでは、次の3D変換方法を使用できます。
rotateX()rotateY()rotateZ()
回転X()メソッド
のrotateX()メソッドは、指定された角度でX軸を中心に要素を回転させます。
回転Y() メソッド
のrotateY()メソッドは、指定された角度でY軸を中心に要素を回転させます。
回転Z()メソッド
のrotateZ()メソッドは、指定された角度でZ軸を中心に要素を回転させます。
CSS変換プロパティ
次の表に、すべての3D変換プロパティを示します。
|
プロパティ |
説明 |
|---|---|
| transform | 要素に2Dまたは3D変換を適用します | transform-origin | ネストされた要素が3D空間でどのようにレンダリングされるかを指定します |
| transform-style | 3D要素がどのように表示されるかについてのパースペクティブを指定します |
| perspective | 3D要素の下の位置を指定します |
| perspective-origin | 画面に面していないときに要素を表示するかどうかを定義します |
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軸の値を指定して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変換された要素の透視図を定義します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。