CSS3 3Dトランスフォーム
CSS3を使用すると、3D変換を使用して、要素をフォーマットすることができます。
以下の要素の上にマウス2Dと3D変換との違いを参照するには：
2D回転
3D回転
3Dトランスフォームのためのブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
続いて数字-webkit-, -moz- 、または-o-接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| 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- |
CSS3 3Dトランスフォーム
この章では、次の3D変換の方法について学びます：
-
rotateX() -
rotateY() -
rotateZ()
rotateX()メソッド
rotateX()メソッドは、指定された程度で、そのX軸周りの要素を回転させます：
例
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
»それを自分で試してみてください rotateY()メソッド
rotateY()メソッドは、指定された程度で、そのY軸周りの要素を回転させます：
例
div
{
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
»それを自分で試してみてください rotateZ()メソッド
rotateZ()メソッドは、指定された程度で、そのZ軸周りの要素を回転させます：
例
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
»それを自分で試してみてください 練習で自分自身をテスト！
CSS3プロパティを変換します
次の表は、すべての3Dプロパティを変換します：
| プロパティ | 説明 |
|---|---|
| transform | 要素に2Dまたは3D変換を適用 |
| transform-origin | あなたが変換された要素上の位置を変更することができます |
| transform-style | 3D空間でレンダリングされるかネストされた要素を指定します |
| perspective | 表示方法3D要素に視点を指定します。 |
| perspective-origin | 3D要素の底部位置を指定します。 |
| backface-visibility | 画面に面していないときに要素が見えるようにするかどうかを定義します |
3Dは、メソッドの変換します
| 関数 | 説明 |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 16値の4×4行列を使用して、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軸の値を与えることによって、3次元スケール変換を定義します |
| 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変換された要素の斜視図を定義します |