CSS transform 属性

定義と使用法

transform 属性は、要素に 2D または 3D 変換を適用します。この属性は、要素を回転、拡大、移動、または傾斜させることを許可します。

transform 属性の理解を深めるために、このを確認してください。デモ。

さらに参照してください：

CSS3 チュートリアル：CSS3 2D 转换

CSS3 チュートリアル：CSS3 3D 转换

HTML DOM リファレンスマニュアル：transform 属性

例

div 要素を回転する：

div
{
transform:rotate(7deg);
}

自分で試してみてください

ページの下部に多くの例があります。

CSS 文法

transform: none|transform-functions;

属性値

値 説明 テスト
none 変換を行わないことを定義します。 テスト
matrix(n,n,n,n,n,n) 2D 変換を定義し、6 値の行列を使用します。 テスト
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3D 変換を定義し、16 値の 4x4 矩陣を使用します。
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 転換要素に対して視点ビューを定義します。 テスト

技術的詳細

デフォルト値： none
継承性： no
バージョン： CSS3
JavaScript 語法： object.style.transform="rotate(7deg)"

さらに多くの例

机の上に投げた画像
この例では、「ポラロイド」画像の作成と画像の回転を示しています。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

数字に-webkit-、-moz-、または-ms-プレフィックスを持つのは、プレフィックスを使用する最初のバージョンを示しています。

属性 Chrome IE / Edge Firefox Safari Opera
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 9.0
4.0 -webkit-		 23.0
15.0 -webkit-