先日習作したtransformで回転させてみるの続き。
位置を揃える部分でそれぞれに癖(mozilaとwebkitの回転とIEの回転の基準点が違うみたい)があるように感じたので、手順を分けてみた。
transform-origin:の挙動を確認
Firefox、safari、chromeでのチェック
transform: rotate(0deg)と、transform: rotate(-90deg)を適用して
transform-originで基準点を変更した以下の全6種類(mozila,webkit用サンプル1)
1 2 3 4 5 6 | /* css / mozila-webkit*/ transform-origin:50%50%; transform-origin:0%0%; transform-origin:100%0%; transform-origin:0%100%; transform-origin:100%100%; |
IEでのチェック
filterを使って回転させた時の挙動(IE用サンプル)
1 2 | /* css / ie*/ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); |
IE6と7で微妙にズレるのは何故だろう…
mozilaとwebkitを、IEの位置に合わせる
-100%を指定して要素のwidth分、左(画面下)に移動させる。(mozila,webkit用サンプル2)
IEをmozilaとwebkitに合わせてもいいのかもしれないけど、mozilaとwebkitの方がコントロールしやすいのでtransform:translate();を使ってこっちを動かす。
結果、以下の指定でIEと同じ回転になるっぽい
1 2 3 | /* css / mozila-webkit*/ transform-origin:0%0%; transform:rotate(-90deg)translate(-100%); |
完成(たぶん)
それぞれの指定を合成してみるとこうなる(IE,mozila,webkit用サンプル)
出来上がったcssはこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /*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%); |
もう少し判りやすく書きたいなぁ。
私はに行っていますお知らせこのサイト レポート} {最新の更新入手取るために定期的にサイト。