今更ですけど、css3のサンプル
をメモ代わりに記事にしておき
ます。使わないと思っていました
が、仕事以外で使うのでコピペ
用にメモ。

実装例をそのままコピペして使えば同様の変形が可能です。ブラウザはChromeとかFiirefox、Safariなどでご覧下さい。細かい対応状況は調べていません。数値は記事に収まり、且つ実装状態が分かるようにしています。見難かったらごめんなさい。webkit系とmoz系を一緒にしてます

デフォルト

デフォルトの状態
これが基準です

skew / 要素を曲げる

skewX(*deg)

-moz-transform: skewX(30deg);
-webkit-transform: skewX(30deg);

-moz-transform: skewX(30deg);
-webkit-transform: skewX(30deg);

skewX(-*deg)

-moz-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);

-moz-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);

skewY(*deg)

-moz-transform: skewY(5deg);
-webkit-transform: skewY(5deg)

-moz-transform: skewY(5deg);
-webkit-transform: skewY(5deg);

skewY(-*deg)

-moz-transform: skewY(-5deg);
-webkit-transform: skewY(-5deg);

-moz-transform: skewY(-5deg);
-webkit-transform: skewY(-5deg);

rotate / 要素を回転

rotate(*deg)

-moz-transform: rotate(185deg);
-webkit-transform: rotate(185deg);

-moz-transform: rotate(185deg);
-webkit-transform: rotate(185deg);

rotate(-*deg)

-moz-transform: rotate(-185deg);
-webkit-transform: rotate(-185deg);

-moz-transform: rotate(-185deg);
-webkit-transform: rotate(-185deg);

[note]
-moz-transform-origin: *% *%;
-webkit-transform-origin: *% *%;
を追加して位置を変更する事も可能
[/note]

scale / 拡大縮小

scale(0.*) / 縮小

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

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

scale(*) / 拡大

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

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

translate / 移動

translate(*px)

-webkit-transform: translate(50px);
-moz-transform: translate(50px);

-webkit-transform: translate(50px);  
-moz-transform: translate(50px); 

translate(-*px)

-webkit-transform: translate(-50px);
-moz-transform: translate(-50px);

-webkit-transform: translate(-50px);  
-moz-transform: translate(-50px); 

変形楽しいですけど使いどころが思い浮かばないのとIE8以下が対応してないので実用性はアレですね。。仕事では使いませんが、個人的には使うのでメモしておきました。