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)のエントリー
- backface-visibility
- perspective-origin
- perspective
- transform-style
- transform-origin
- matrix3d()
- matrix()
- perspective()
- skewY()
- skewX()
- skew()
- rotate3d()
- rotateZ()
- rotateY()
- rotateX()
- rotate()
- scale3d()
- scaleZ()
- scaleY()
- scaleX()
- scale()
- translateZ()
- translate3d()
- translateY()
- translateX()
- translate()
- transform