transformで回転させてみる、の続き。

先日習作したtransformで回転させてみるの続き。

位置を揃える部分でそれぞれに癖(mozilaとwebkitの回転とIEの回転の基準点が違うみたい)があるように感じたので、手順を分けてみた。

transform-origin:の挙動を確認

Firefox、safari、chromeでのチェック
transform: rotate(0deg)と、transform: rotate(-90deg)を適用して
transform-originで基準点を変更した以下の全6種類(mozila,webkit用サンプル1)

[css]
/* css / mozila-webkit*/
transform-origin:50% 50%;
transform-origin:0% 0%;
transform-origin:100% 0%;
transform-origin:0% 100%;
transform-origin:100% 100%;
[/css]

IEでのチェック
filterを使って回転させた時の挙動(IE用サンプル)
[css]/* css / ie*/
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);[/css]

IE6と7で微妙にズレるのは何故だろう…

mozilaとwebkitを、IEの位置に合わせる

-100%を指定して要素のwidth分、左(画面下)に移動させる。(mozila,webkit用サンプル2)
IEをmozilaとwebkitに合わせてもいいのかもしれないけど、mozilaとwebkitの方がコントロールしやすいのでtransform:translate();を使ってこっちを動かす。
結果、以下の指定でIEと同じ回転になるっぽい
[css]/* css / mozila-webkit*/
transform-origin:0% 0%;
transform: rotate(-90deg) translate(-100%);
[/css]

完成(たぶん)

それぞれの指定を合成してみるとこうなる(IE,mozila,webkit用サンプル)

出来上がったcssはこんな感じ。
[css]
/*ie*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

/*firefox*/
-moz-transform-origin:0% 0%;
-moz-transform: rotate(-90deg) translate(-100%);

/*safari,chrome*/
-webkit-transform-origin:0% 0%;
-webkit-transform: rotate(-90deg) translate(-100%);

/*いずれopera*/
transform-origin:0% 0%;
transform: rotate(-90deg) translate(-100%);
[/css]

もう少し判りやすく書きたいなぁ。