CSS 3D 変換
- 前のページ CSS 2D 変換
- 次のページ CSS フェードイン
CSS 3D 変換
CSSは3D変換もサポートしています。
以下の要素にマウスを合わせると、2Dと3Dの変換の違いを確認できます：
2D回転
3D回転
本章では、以下のCSS属性について学びます：
transform
ブラウザのサポート
テーブルの数字は、属性を完全にサポートする最初のブラウザバージョンを示しています。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
CSS 3D変換メソッド
CSSで transform 属性、以下の3D変換メソッドを使用できます：
rotateX()rotateY()rotateZ()
rotateX()メソッド
rotateX() 要素がX軸に沿って指定された角度で回転する方法：
例
#myDiv {
transform: rotateX(150deg);
}
rotateY()メソッド
rotateY() 要素がY軸に沿って指定された角度で回転する方法：
例
#myDiv {
transform: rotateY(130deg);
}
rotateZ()メソッド
rotateZ() 要素がZ軸に沿って指定された角度で回転する方法：
例
#myDiv {
transform: rotateZ(90deg);
}
CSS変換属性
以下のすべての3D変換属性がリストされています：
| 属性 | 説明 |
|---|---|
| transform | 2Dまたは3D変換を要素に適用します。 |
| transform-origin | 変換された要素の位置を変更することができます。 |
| transform-style | 3D空間内でのネストされた要素の表示方法を指定します。 |
| perspective | 3D要素の視点効果を指定します。 |
| perspective-origin | 3D要素の底の位置を指定します。 |
| backface-visibility | 要素がスクリーンに向いていない場合の可視性を定義します。 |
CSS 3D変換メソッド
| 関数 | 説明 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
3D変換を定義し、16つの値の4x4マトリックスを使用します。 |
| translate3d(x,y,z) | 3D変換を定義します。 |
| translateX(x) | 3D変換を定義し、X軸の値のみを使用します。 |
| translateY(y) | 3D変換を定義し、Y軸の値のみを使用します。 |
| translateZ(z) | 3D変換を定義し、Z軸の値のみを使用します。 |
| scale3d(x,y,z) | 3D拡大変換を定義します。 |
| scaleX(x) | 3D拡大変換を定義し、X軸の値を指定します。 |
| scaleY(y) | 3D拡大変換を定義し、Y軸の値を指定します。 |
| scaleZ(z) | 3D拡大変換を定義し、Z軸の値を指定します。 |
| rotate3d(x,y,z,angle) | 3D 旋回を定義します。 |
| rotateX(angle) | X 軸に沿った 3D 旋回を定義します。 |
| rotateY(angle) | Y 軸に沿った 3D 旋回を定義します。 |
| rotateZ(angle) | Z 軸に沿った 3D 旋回を定義します。 |
| perspective(n) | 3D 変換要素の視点ビューを定義します。 |
- 前のページ CSS 2D 変換
- 次のページ CSS フェードイン
