CSS3のtransformは、要素の変形（拡大縮小、回転）と移動を行うプロパティです。
transformプロパティには関数を設定することができ、これらの関数を組み合わせてHTML要素の変形や移動を定義できます。
| translate(dx, dy) | dx, dyだけ移動 |
|---|---|
| rotate(deg) | deg°だけ回転 |
| scale(r) | 拡大率rで拡大縮小 |
まずは、translateから試してみましょう。translateはx/y方向の移動量を引数に指定しますが、その単位はCSS単位であればピクセルでも%でもcmなどでも大丈夫です。
上のボタンには、クリックすると
transform = 'translate(80px, 20px)'
というスタイル設定を行うJavaScriptを仕込んであります。クリックして移動することを確認しましょう。transformは、このようにJavaScriptでCSSを動的に設定して「動き」をつけるのに好都合な仕組みですね。
次にrotateによる要素の回転。transformにrotate(30deg)を設定するとどうなるか、見てみましょう。
続いて、scaleによる拡大縮小です。transformプロパティにscale()を指定する際は、「要素の拡大縮小率」を指定します。つまり「scale(2)」とすれば、2倍の大きさになるわけです。
最後に、複数の変形を組み合わせてみます。cssのtransformプロパティは、関数が記述された順番に適用されるので、移動してから回転するボタンと回転してから移動するボタンを作ってみます。それぞれの違いを、確認してみましょう。
先に回転させると、「回転された座標系で」translateが適用される点に注意が必要です。
なお、AndroidやiOS、Chromeなどでは、transformの前にベンダープリフィックス「-webkit-」を付ける必要があります（cssファイル／cssプロパティなら-webkit-transform、JavaScriptのプロパティならwebkitTransformと記述する）。