先日習作した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]
もう少し判りやすく書きたいなぁ。
コメント