[CSS3]skew

CSS3を始めて10日が経ちました。
CSS3では新しいプロパティが追加されていますが、
その中のskewプロパティを活かしたものを作ってみました。
jQueryなどのライブラリを使わず全て自作しました。

WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280

ステージでマウスホイール:カメラ上下
円柱上でマウスホイール:円柱回転

skew


CSS3で3Dにする場合
transform-styleの値をpreserve-3dにして、
rotateYを変化させれば立体的に回転してくれます。
しかし、カメラが動くことを想定して、パースを合わせるためにoriginYの値を
3D処理毎に変化させると これがまた重い。異常に重い。
こんな感じになる。preserve-3dバージョン
そこで今回は、skewとrotateに同じ値を入れると縦方向にシアーがかかるので
これを利用してパースをつけています。
3D座標から2D座標にプロットするやり方はこちらのエントリーを。

さて、次は何を作ろうか。