今回はCSS3でもあまり一般的に知られてないtransformプロパティについて説明します。transformプロパティは2008年の11月まではWebkit系とAppleのブラウザとSafariの独自実装でしたが，11月以降は正式にW3CにEditors Draftとして受けいられ，現在は策定中です（※1）。
今後のブラウザでは，より一層のCSS3やSVG, HTML5の対応，レンダリングエンジンのスピードに焦点があてられます。いち早く，CSS3に慣れ実践的に使えるように，今から新しいセレクタも含めプロパティを勉強し実践で使えるようしておくべきでしょう。
今回説明するプロパティは『transformプロパティ』と『transform-originプロパティ』です。両方のプロパティに共通するtransform（トランスフォーム）という名前のとおり，『変形』を実装するためのプロパティです。
- ※1
- transformプロパティは，SVGのTransformの属性を元に実装されています。
transformプロパティをサポートしているブラウザ
現在，『transformプロパティ』と『transform-originプロパティ』プロパティをサポートしているブラウザはWebkit, Safariの3.1以上, Google Chromeと，W3Cの草案に正式に採用されてから僅かしか経っていませんがFirefoxの3.1がサポートしています。OperaやInternet Exprolerが執筆時点ではサポートしていません。
- 対応ブラウザ：
- Webkit nightly version (mac, win, linux)
- Firefox 3.1以上
- Safari 3.1以上
- Google chrome
なお，実際に利用するには，Webkit, Safari, Google Chromeの場合-webkit-. Firefoxの場合-moz-とプリフィックス（接頭辞）を記述する必要があります。
Transformの基本
Transformプロパティは，拡大（scale），回転（rotate），ゆがみ（skew），移動（translate）と，4つのファンクションがあります。
表1 実装済みTransformファンクション一覧
| ファンクション名 | 機能 |
|---|---|
| transform-origin | transformの支点を設定 |
| rotate | 回転 |
| translate | 移動 |
| scale | 拡大／縮小 |
| skew | X軸，Y軸へのゆがみ |
表2 未実装Transformファンクション覧
| ファンクション名 | 機能 |
|---|---|
| backface-visibility | 要素の裏側の可視，不可視 |
| perspective | 奥行き |
| perspective-origin | 奥行きの支点 |
| transform-style | 2D（flat）と3Dの指定 |
Transformプロパティを学ぶ際は，3D（3次元）で考えることが大切です。これはCSS全般に言えることで，CSSは2Dではなく3Dを扱うからです。3Dで考えるクセを身につけるようにしましょう。
3DとはX軸，Y軸，Z軸のそれぞれ３方向への軸になります。
- X軸（上下方向）
- Y軸（左右方向）
- Z軸（奥行き）
図1 3次元でCSSを考える
Transformプロパティの記述方法
上述したように，現在，transformプロパティを記述する場合には，webkit系では-webkit-を，firefoxでは-moz-を接頭辞としてプロパティの前に記述します。記述の際には以下のようにFirefox, Webkit系、今後将来採用された際の記述をするといいと思います。
- -moz-transform: hoge;
- -webkit-transform: hoge;
- transform: hoge;
Transformプロパティの記述順序
transformプロパティは記述の順番に適用されます。特にscale（拡大・縮小）の後にtranslate（移動）を適用させると移動する値にも差がでてしまうことに注意してください。
次ページからは，実際に各プロパティのサンプルを確認していきましょう。
