transform

このエントリーをはてなブックマークに追加

transformプロパティは要素の自由変形を行うためのプロパティです。

デフォルトの値は”none”ですが次のようなtransform関数を指定することで要素の自由変形が可能です。transform関数はスペース区切りで複数指定可能です。

2D Transform

matrix() 要素の自由変形が可能です。
translate() 要素をX軸・Y軸方向に移動させることが可能です。
translateX() 要素をX軸方向に移動させることが可能です。
translateY() 要素をY軸方向に移動させることが可能です。
scale() 要素を拡大・縮小させることが可能です。
scaleX() 要素の横幅を拡大・縮小させることが可能です。
scaleY() 要素の高さを拡大・縮小させることが可能です。
rotate() 要素を回転させることが可能です。
skew() X軸方向とY軸方向に変形させることができます。
skewX() 要素をX軸方向に変形させることができます。
skewY() 要素をY軸方向に変形させることができます。

3D Transform

matrix3d() 要素の3D自由変形が可能です。
translate3d() 要素をX軸・Y軸・Z軸方向に移動させることが可能です。
translateZ() 要素をZ軸方向に移動させることが可能です。
scale3d() 要素をX軸方向、Y軸方向、Z軸方向に拡大・縮小させることが可能です。
scaleZ() 要素をZ方向に拡大・縮小させることが可能です
rotate3d() 要素を任意の軸を中心に回転させることができます。
rotateX() 要素をX軸を中心に回転させることができます。
rotateY() 要素をY軸を中心に回転させることができます。
rotateZ() 要素をZ軸を中心に回転させることができます。
perspective() 自由変形時の起点となる奥行きを指定できます。

また、transform-originで自由変形の起点となる位置の指定が可能です。

対応ブラウザ

IE Chrome 29 Safari Firefox 23 iOS Android
△ 9
◯ 10〜
△ 5.1〜 △ 3.2〜 △ 2.1〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。

参考URL

7. The ‘transform’ Property - W3C

登録日 : 2013年08月27日 最終更新日 : 2013年12月17日

同じカテゴリー(Transform)のエントリー

検索

スポンサードリンク

バージョン

リファレンス