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

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

transform-origin:の挙動を確認

transform-origin

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

90deg

IEでのチェック
filterを使って回転させた時の挙動(IE用サンプル)

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

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

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

-100%

完成(たぶん)

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

出来上がったcssはこんな感じ。

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


One thought on “transformで回転させてみる、の続き。

コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.