Style transform属性

定義と用法

transform 属性は2Dまたは3D変換を要素に適用します。この属性は、要素に対して回転、拡大、移動、傾斜などを実行することができます。

参照もしくは：

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

例

div要素を回転させる：

document.getElementById("myDIV").style.transform = "rotate(7deg)";

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

構文

transform属性を返します：

object.style.transform

transform属性を設定します：

object.style.transform = "none|transform-functions|initial|inherit"

属性値

値 説明
none 変換を指定しないことを定義します。
matrix(n, n, n, n, n, n) 6値行列を使用して2次元変換を定義します。
matrix3d(n, n, n, n, etc....) 4x4の16値行列を使用して3D変換を定義します。
translate(x, y) 2D平移を定義します。
translate3d(x, y, z) 3D平移を定義します。
translateX(x) X軸の値のみを使用して平移を定義します。
translateY(y) Y軸の値のみを使用して平移を定義します。
translateZ(z) 3D平移を定義します。Z軸の値のみを使用します。
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変換要素の視点を定義します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性を親要素から継承します。参照してください inherit。

技術的詳細

デフォルト値： なし
返り値： 文字列、要素の transform属性。
CSSバージョン： CSS3

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0