今回はCSS3でもあまり一般的に知られてないtransformプロパティについて説明します。transformプロパティは2008年の11月まではWebkit系とAppleのブラウザとSafariの独自実装でしたが,
今後のブラウザでは,
今回説明するプロパティは
- ※1
- transformプロパティは,
SVGのTransformの属性を元に実装されています。
transformプロパティをサポートしているブラウザ
現在,
- 対応ブラウザ:
- Webkit nightly version (mac, win, linux)
- Firefox 3.
1 以上 - Safari 3.
1 以上 - Google chrome
なお,
Transformの基本
Transformプロパティは,
表1 実装済みTransformファンクション一覧
ファンクション名 | 機能 |
---|---|
transform-origin | transformの支点を設定 |
rotate | 回転 |
translate | 移動 |
scale | 拡大/ |
skew | X軸, |
表2 未実装Transformファンクション覧
ファンクション名 | 機能 |
---|---|
backface-visibility | 要素の裏側の可視, |
perspective | 奥行き |
perspective-origin | 奥行きの支点 |
transform-style | 2D |
Transformプロパティを学ぶ際は, 3DとはX軸, 上述したように, transformプロパティは記述の順番に適用されます。特にscale 次ページからは,
Transformプロパティの記述方法
Transformプロパティの記述順序