CSS3 は、3D 変形を使用して、要素のフォーマットを可能にします。
下の要素の上にマウスを乗せ、2D 変換と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- |
この章では、下記 3D 変形メソッドを学習します:
rotateX()rotateY()rotateZ()
rotateX() メソッドは、X 軸の周りを指定の角度に要素を回転します：
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
Try it Yourself ❯
rotateY() メソッドは、Y 軸の周りを指定の角度に要素を回転します：
div
{
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
Try it Yourself ❯
rotateZ() メソッドは、Z 軸の周りを指定の角度に要素を回転します：
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
Try it Yourself ❯
Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯
次の表は、全 3D transform プロパティの一覧です：
| プロパティ | 説明 |
|---|---|
| transform | 要素へ 2D または 3D 変形を適用する |
| transform-origin | 変形した要素の位置変更を可能にする |
| transform-style | ネストした要素を、3D 空間にどのようにレンダリングするかを指定する |
| perspective | 3D 要素をどう表示するか遠近効果を指定する |
| perspective-origin | 3D 要素の底辺の位置を指定する |
| backface-visibility | スクリーンに面していない時に、要素を表示するかどうかを定義する |
| 関数 | 説明 |
|---|---|
| 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 translation を定義する |
| translateX(x) | X 軸への値だけを使用し 3D translation を定義する |
| translateY(y) | Y 軸への値だけを使用し 3D translation を定義する |
| translateZ(z) | Z 軸への値だけを使用し 3D translation を定義する |
| scale3d(x,y,z) | 3D 拡大・縮小（3D scale transformation）を定義する |
| scaleX(x) | X 軸の値を指定して 3D 拡大・縮小（3D scale transformation）を定義する |
| scaleY(y) | Y 軸の値を指定して 3D 拡大・縮小（3D scale transformation）を定義する |
| scaleZ(z) | Z 軸の値を指定して 3D 拡大・縮小（3D scale transformation）を定義する |
| rotate3d(x,y,z,angle) | D 回転（3D rotation）を定義する |
| rotateX(angle) | X 軸方向に 3D 回転（3D rotation）を定義する |
| rotateY(angle) | Y 軸方向に 3D 回転（3D rotation）を定義する |
| rotateZ(angle) | Z 軸方向に 3D 回転（3D rotation）を定義する |
| perspective(n) | 3D 変形要素へ遠近表示を定義する |