IEでtransformプロパティを指定する時の注意

ブログのデザインをいじっていた時に気づいた事。

スタイルシートでtransformプロパティを指定すると座標移動、回転、拡大縮小が

3Dゲームを作成する時の感覚で指定できるが、IEの場合は様子が違うよう。

具体的には、IEの場合は2Dでの変換しか行えないというもの。

以下はMicrosoftの解説サイト。

http://msdn.microsoft.com/ja-jp/ie/ff468705#_CSS3_2D_Transforms

更新日時が2011/5/27という事で半年以上も前の記事になるが、

内容を読むと奥行きに関わる指定が無い事が分かる。

このため、safariで指定することができるrotateZのような簡単な指定は行えない。

canvasとjavascriptを使って描画してやれば、似たような表現は可能そうだが・・・。

ちなみに、transformプロパティを指定しているのは日付の部分で、図のように若干斜めになっている。

この部分で、rotateZを指定した時に気付いたというエピソード。

結局、rotateZを指定する必要は無く、rotateでZ軸を中心に回転させれば思い通りの表現ができたという話。