先日習作したtransformで回転させてみるの続き。
位置を揃える部分でそれぞれに癖(mozilaとwebkitの回転とIEの回転の基準点が違うみたい)があるように感じたので、手順を分けてみた。
transform-origin:の挙動を確認
Firefox、safari、chromeでのチェック
transform: rotate(0deg)と、transform: rotate(-90deg)を適用して
transform-originで基準点を変更した以下の全6種類(mozila,webkit用サンプル1)
/* 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用サンプル)
/* 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と同じ回転になるっぽい
/* css / mozila-webkit*/ transform-origin:0% 0%; transform: rotate(-90deg) translate(-100%);
完成(たぶん)
それぞれの指定を合成してみるとこうなる(IE,mozila,webkit用サンプル)
出来上がった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%);
もう少し判りやすく書きたいなぁ。
関連記事かもしれん:
乱雑モックアップのフィード