CSS3 transformプロパティ
例
div要素を回転させます：
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
試してみる »
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザのバージョン番号を表します。
-webkit-、-ms-、-moz- の前にある数字は、そのプレフィックス付きプロパティをサポートする最初のブラウザのバージョン番号を示します。
| プロパティ | |||||
|---|---|---|---|---|---|
| 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 プロパティは、要素の2Dまたは3D変換に適用されます。このプロパティを使用すると、要素を回転、拡大縮小、移動、傾斜などさせることができます。
Transform プロパティをよりよく理解するには、.
| デフォルト値： | none |
|---|---|
| 継承： | no |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.transform="rotate(7deg)" |
構文
transform: none|transform-functions;
| 值 | 説明 |
|---|---|
| none | 変換を行わないことを定義します。 |
| matrix(n,n,n,n,n,n) | 6つの値からなる行列を使用して2D変換を定義します。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 16個の値からなる4x4行列を使用して3D変換を定義します。 |
| translate(x,y) | 2D変換を定義します。 |
| translate3d(x,y,z) | 3D変換を定義します。 |
| translateX(x) | X軸の値のみを使用して変換を定義します。 |
| translateY(y) | Y軸の値のみを使用して変換を定義します。 |
| translateZ(z) | Z軸の値のみを使用して3D変換を定義します。 |
| scale(x[,y]?) | 2D拡大縮小変換を定義します。 |
| scale3d(x,y,z) | 3D拡大縮小変換を定義します。 |
| scaleX(x) | X軸の値を設定して拡大縮小変換を定義します。 |
| scaleY(y) | Y軸の値を設定して拡大縮小変換を定義します。 |
| scaleZ(z) | Z軸の値を設定して3D拡大縮小変換を定義します。 |
| rotate(angle) | パラメータで角度を指定して2D回転を定義します。 |
| rotate3d(x,y,z,angle) | 3D回転を定義します。 |
| rotateX(angle) | X軸に沿った3D回転を定義します。 |
| rotateY(angle) | Y軸に沿った3D回転を定義します。 |
| rotateZ(angle) | Z軸に沿った3D回転を定義します。 |
| skew(x-angle,y-angle) | X軸およびY軸に沿った2Dスキュー変換を定義します。 |
| skewX(angle) | X軸に沿った2Dスキュー変換を定義します。 |
| skewY(angle) | Y軸に沿った2Dスキュー変換を定義します。 |
| perspective(n) | 3D変換要素に透視ビューを定義します。 |
その他の例
この例では、「ポラロイド」写真の作成方法と画像の回転方法を示しています。
CSS3 Transform 各種の変形と回転
その他の拡張