CSS3のtransformで要素のサイズを左寄せで縮める。

CSS3のtransformというのはすごく便利。

-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);

これで要素が半分の大きさになります。

しかしこれだと要素が真ん中で小さくなるので、左詰めできません。

こういうときは、

-moz-transform: scale(0.5) translate(-100px, -100px);
-webkit-transform: scale(0.5) translate(-100px, -100px);

のようにすればいいんです。
これは全体の大きさが200px,200pxのときです。
中央から左詰めに移動するときの距離は50px,50pxなんですが、
translateで移動する値を指定するときは、
scaleする前の値で計算してからscale倍にして移動するようです。
注意しましょう。