CSSで3D表現しようず！ perspectiveのmozとwebkitのちょっとした違い。

ブログ始めました。はてなブログでマークダウンどうやんの？って思いながら書いてます。

CSSの奥行きをつけるperspectiveでハマったのでちょっとメモです。

まず、画像を傾かせてパースを付けたものを作りたいとします。
こんなの↓

htmlはこんな感じ。

<div id="world">

    <div id="pic"><img src="http://jsrun.it/assets/a/e/M/E/aeMEX.jpg" width="300" height="300" alt="うさぎかわいい"></div>

</div>

 CSSでは、
まず傾かせたい#picのx軸を回転させて、3D空間に描画されるよう、
transform-style: preserve-3dを指定します。
※実際はベンダープレフィックスをつけましょー。

#pic {

　transform-style: preserve-3d;

　transform: rotateX(50deg);
}

#worldの子要素が3Dになるように作りたいので、
#worldに奥行きに深度を設定するperspectiveを指定します。

#world {
　perspective: 300;

}

ここでちょっとハマリポイントが…。
実際はprefixつけるのでこんな感じ。

#world {
　-webkit-perspective: 300;

　-moz-perspective: 300;

　perspective: 300;

}

※IEとOperaはどうなるかまだ調べてません。すみません。すみません。

でも、これ、Firefoxで効きません。
アレなんでだろーと思ってちょこっといじってたら、これで動きました。

#world {
　-webkit-perspective: 300;

　-moz-perspective: 300px;

　perspective: 300;

}

-moz-perspectiveには単位が必要なんですね！逆にwebkitはpx付けると動きませんヽ(=´▽`=)ﾉ
まあ、このへんはどうにかして欲しいけど、しょうが無いですね。


全体のコードは下記をご覧くださいませ。