2012
02
29
02
29
CSSによる要素の回転とずれ
CSSのtransformでrotateを使って要素を回転させていたら、回転はするのだけどのぞみどおりの位置("position:absolute;"で指定)にきたりこなかったり。
やりたかったのは、正方形の上にwidthが等しい長方形を90度回転して重ねること。
なんかと思ったら回転軸が長方形の中心になっていた。これをのぞみの位置にもってくるためCSSで以下のように指定した。
topとleftは0に指定。transformのmatrix内は、4つ目までの引数で回転する角度を指定している。5つ目と6つ目が回転させたうえで上下左右にどれだけ動かすか（ピクセル）。5つ目を(height-width)/2、6つ目を(width-height)/2にする。これで重なる。
やりたかったのは、正方形の上にwidthが等しい長方形を90度回転して重ねること。
なんかと思ったら回転軸が長方形の中心になっていた。これをのぞみの位置にもってくるためCSSで以下のように指定した。
topとleftは0に指定。transformのmatrix内は、4つ目までの引数で回転する角度を指定している。5つ目と6つ目が回転させたうえで上下左右にどれだけ動かすか（ピクセル）。5つ目を(height-width)/2、6つ目を(width-height)/2にする。これで重なる。
.black{
position:relative;
}
.blue{
position: absolute;
top:0px;
left:0px;
width:500px;
height:60px;
transform:matrix(0,-1,1,0,-220,220);
-ms-transform:matrix(0,-1,1,0,-220,220); /* Internet Explorer */
-moz-transform:matrix(0,-1,1,0,-220,220)); /* Firefox */
-webkit-transform:matrix(0,-1,1,0,-220,220); /* Safari and Chrome */
-o-transform:matrix(0,-1,1,0,-220,220); /* Opera */
}
スポンサーサイト
