主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSによる要素の回転とずれ

                
tags:
CSSのtransformでrotateを使って要素を回転させていたら、回転はするのだけどのぞみどおりの位置("position:absolute;"で指定)にきたりこなかったり。

やりたかったのは、正方形の上にwidthが等しい長方形を90度回転して重ねること。
120229.png


なんかと思ったら回転軸が長方形の中心になっていた。これをのぞみの位置にもってくるため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 */
}
スポンサーサイト
プロフィール

Matoba

Author:Matoba

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。