対応ブラウザ

• Safari 3.1+
• Google Chrome
• Firefox 3.1+
• Opera 10.5+

現時点ではそれぞれベンダープリフィックスをつける必要があります。
Safari・Chromeは-webkit-。Firefoxは-moz-。Operaは-o-をそれぞれつけてください。

ファンクション

transformプロパティで要素を変形させるときに指定することができるファンクションというものがあります。このファンクションによって拡大・回転・ゆがみ・移動などの指定をします。

transform-origin

変形の起点を指定

scale

拡大 / 縮小

rotate

回転

skew

X軸 / Y軸へのゆがみ

translate

移動

指定方法

transformでどのように変形が行われたかわかるようにこの画像を基準として変形させてみようと思います。

transform-orogin

横と縦をそれぞれパーセントで指定します。
何も指定しなければ要素の中心（50% 50%）になります。

transform-origin; 横 縦

実際に指定する場合はこのようになります。

-webkit-transform-origin; 50% 50%;
-moz-transform-origin; 50% 50%;
-o-transform-origin; 50% 50%;

scale

scaleを指定した要素が拡大されます。指定する数値はパーセントではなく、100%を1とした数値になります。カンマで数値を区切ると縦と横の比率を指定することができます。

transform: scale( [縦と横の比率] );
transform: scale( [横の比率], [縦の比率] );	

(1)
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-o-transform: scale(0.75);

(2)
-wekit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);

(3)
-wekit-transform: scale(0.75, 1.3);
-moz-transform: scale(0.75, 1.3);
-o-transform: scale(0.75, 1.3);

rotate

rotateを指定した要素を回転させます。

transform: rotate( [角度] );

(1)
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);

(2)
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-o-transform: rotate(-25deg);

degという見慣れない単位で指定するのですが、単純にdeg=度ということです（多分）。プラスの値を指定した場合は右側に傾き、マイナスの値の場合は左側に傾きます。

skew

skewを指定した要素を歪ませることができます。カンマで値を区切りことで縦と横それぞれに値を指定することができます。

transform: skew( [縦と横] );
transform: skew( [横向きの角度], [縦向きの角度] ):

(1)
-webkit-transform: skew(25deg);
-moz-transform: skew(25deg);
-o-transform: skew(25deg);

(2)
-webkit-transform: skew(0, 25deg);
-moz-transform: skew(0, 25deg);
-o-transform: skew(0, 25deg);

(3)
-webkit-transform: skew(25deg, 0);
-moz-transform: skew(25deg, 0);
-o-transform: skew(25deg, 0);

translate

translateを指定した要素を移動させます。カンマで区切って左右方向、上下方向の値をそれぞれ指定することもできます。値を一つだけ指定した場合は左右方向の移動だけになります。単位はpx/emや%などで指定します。

transform: translate( [左右方向] );
transform: translate( [左右], [上下] );

(1)
-webkit-transform: translate(10px);
-moz-transform: translate(10px);
-o-transform: translate(10px);

(2)
-webkit-transform: translate(10px, 10px);
-moz-transform: translate(10px, 10px);
-o-transform: translate(10px, 10px);