<div> 要素を回転します：
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Try it Yourself ❯
transform プロパティは、2D または 3D 変形を要素へ適用します。 このプロパティを使用すると、要素の回転(rotate)、拡大縮小(scale)、移動(move)、傾斜(skew)などが可能になります。
プロパティをより深く理解するために、 デモをご覧ください。
| デフォルト値： | なし |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 可。animatable を参照 Try it |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.transform="rotate(7deg)" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
-webkit-、-moz-、-o- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
transform: none|transform-functions|initial|inherit;
| 値 | 説明 | Play it | |
|---|---|---|---|
| none | 変形を定義しません | Play it ❯ | |
| matrix(n,n,n,n,n,n) | 6 個の値の行列を使用して 2D 変形を定義します | Play it ❯ | |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
4x4 の行列 16 個の値を使用して 3D 変形を定義します | ||
| translate(x,y) | 2D 移動を定義します | Play it ❯ | |
| translate3d(x,y,z) | 3D 移動を定義します | ||
| translateX(x) | X 軸への値のみを使用して移動を定義します | Play it ❯ | |
| translateY(y) | Y 軸への値のみを使用して移動を定義します | Play it ❯ | |
| translateZ(z) | Z 軸への値のみを使用して 3D 移動を定義します | ||
| scale(x,y) | 2D の拡大または縮小による変形を定義します | Play it ❯ | |
| scale3d(x,y,z) | 3D の拡大または縮小による変形を定義します | ||
| scaleX(x) | X 軸への値を指定し拡大または縮小による変形を定義します | Play it ❯ | |
| scaleY(y) | Y 軸への値を指定し拡大または縮小による変形を定義します | Play it ❯ | |
| scaleZ(z) | Z 軸への値を指定し 3D の拡大または縮小による変形を定義します | ||
| rotate(angle) | 2D 回転を定義します。角度は、パラメータで指定します | Defines a 2D rotation, the angle is specified in the parameter | Play it ❯ |
| rotate3d(x,y,z,angle) | 3D 回転を定義します | ||
| rotateX(angle) | X 軸を中心とする 3D 回転を定義します | Play it ❯ | |
| rotateY(angle) | Y 軸を中心とする 3D 回転を定義します | Play it ❯ | |
| rotateZ(angle) | Z 軸を中心とする 3D 回転を定義します | Play it ❯ | |
| skew(x-angle,y-angle) | X 軸と Y 軸方向に 2D 傾斜変形を定義します | Play it ❯ | |
| skewX(angle) | X 軸方向に 2D 傾斜変形を定義します | Play it ❯ | |
| skewY(angle) | Y 軸方向に 2D 傾斜変形を定義します | Play it ❯ | |
| perspective(n) | 3D 変形要素の遠近透視図を定義します | ||
| initial | プロパティにデフォルト値を設定します。initial を参照 | ||
| inherit | このプロパティは親要素を継承します。inherit を参照 |
テーブルに投げられた画像
この例は、"polaroid" 写真を作成し、画像を回転する方法のデモです。
CSS チュートリアル： CSS 2D Transforms
CSS チュートリアル： CSS 3D Transforms
HTML DOM リファレンス：transform プロパティ