前回記事boxの配置方法をさらに発展させていきたいと思います。
次のようなものを作ります。
divの中にdivを追加し、中側のdivを回転させるというものです。 ※画像処理で作ればいいじゃん。とお思いの方もいらっしゃると思います。わたくしもそれは思いますが、まあ、phpやmysqlを使って、この回転させた画像を定期的に変える!ということが可能になるためにhtmlでどう表現するかを色々とまとめていきたいと思います。
まずはボックスを配置してみましょう。わかりやすいように背景のところは灰色、ボックスはひとまず赤にします。
HTML部
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>position+回転</title> <link rel="stylesheet" type="text/css" href="position.css"> </head> <body> <div id="picture"> <div id="up"> </div> </div> </body> </html>
CSS部
position:relativeとposition:absoluteは重要でしたね。それをしっかりと記述していきます。
@charset "utf-8"; /* CSS Document */ #picture{ margin:30px auto; width: 600px; height: 450px; background: #999; position:relative; } #up{ position: absolute; top: 50px; left: 310px; width: 200px; height: 100px; background: #F00; }
結果は以下
まずはできました。
次に回転です。 CSS部。ベンダープレフィックスを一応つけておきましょう。
@charset "utf-8"; /* CSS Document */ #picture{ margin:30px auto; width: 600px; height: 450px; background: #999; position:relative; } #up{ position: absolute; top: 50px; left: 310px; width: 200px; height: 100px; background: #F00; /*以下回転*/ transform:rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); }
結果は以下
回転できました。
boxの中心を中心とし、マイナスを付けると反時計回りに、プラスにすると時計回りに回転します。
その他にも様々なものがあります。
rotate(○○deg)2Dの回転角度 rotateX(○○deg)X軸を軸とする回転 rotateY(○○deg)Y軸を軸とする回転 rotateZ(○○deg)Z軸を軸とする回転 rotate3d(数値, 数値, 数値,○○deg)3D回転
画像や文字等を入れないとわかりづらいかもしれません。
と、記述してしまったものの、色々な方法が考えられます。
外側CSSの背景画像 | 外側HTMLの画像 | 載せる側のCSSの背景画像 | 載せる側のHTMLの画像 |
これを全部記述したら、2^4通りで16通りです・・・。正確にいえば、少なくとも一つは画像にするとしたらの余事象の計算になり、2^4-1の15通りです。 ハイ。イヤです。全部はやりたくありません。
決めます。
1つ目
外側CSSの背景画像 | 外側HTMLの画像 | 載せる側のCSSの背景画像 | 載せる側のHTMLの画像 |
× | ○ | × | ○ |
2つ目
外側CSSの背景画像 | 外側HTMLの画像 | 載せる側のCSSの背景画像 | 載せる側のHTMLの画像 |
○ | × | ○ | × |
ぐらいやりましょうか。
ちなみに回転の画像はpng画像であり、右半分は透過している状態です。
HTML部
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>position+回転</title> <link rel="stylesheet" type="text/css" href="position.css"> </head> <body> <div id="picture"><p><img src="back.png" alt="背景"></p> <div id="up"><p><img src="rotate_half.png" alt="回転文字"></p> </div> </div> </body> </html>
CSS部
@charset "utf-8"; /* CSS Document */ #picture{ margin:30px auto; width: 600px; height: 450px; position:relative; } #up{ position: absolute; top: 50px; left: 310px; width: 200px; height: 100px; /*以下回転*/ transform:rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); }
結果次のようになりました。
HTML部
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>position+回転</title> <link rel="stylesheet" type="text/css" href="position.css"> </head> <body> <div id="picture"> <div id="up"> </div> </div> </body> </html>
CSS部
#picture{ margin:30px auto; width: 600px; height: 450px; background: url(back.png); position:relative; } #up{ position: absolute; top: 50px; left: 310px; width: 200px; height: 100px; background:url(rotate_half.png); /*以下回転*/ transform:rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); }
結果次のようになりました。
はい。両方とも似たような感じになりました。※少しずれましたが、おそらくCSSのリセットファイルを読み込んでいないため、少しずれたとおもわれます。
UP側のCSSのボックスを赤にしました。
HTML部
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>position+回転</title> <link rel="stylesheet" type="text/css" href="position.css"> </head> <body> <div id="picture"><p><img src="back.png" alt="背景"></p> <div id="up"> </div> </div> </body> </html>
CSS部
@charset "utf-8"; /* CSS Document */ #picture{ margin:30px auto; width: 600px; height: 450px; position:relative; } #up{ position: absolute; top: 50px; left: 310px; width: 200px; height: 100px; background: #F00;/*赤いボックス*/ opacity: 0.5;/*半透明*/ /*以下回転*/ transform:rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); } 結果は以下
HTML部
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>position+回転</title> <link rel="stylesheet" type="text/css" href="position.css"> </head> <body> <div id="picture"><p><img src="back.png" alt="背景"></p> <div id="up"><p><img src="rotate_half.png" alt="回転の画像"></p> </div> </div> </body> </html>
CSS部
@charset "utf-8"; /* CSS Document */ #picture{ margin:30px auto; width: 600px; height: 450px; position:relative; } #up{ position: absolute; top: 50px; left: 310px; width: 200px; height: 100px; opacity: 0.5;/*半透明*/ /*以下回転*/ transform:rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); } 結果は以下
HTML部
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>position+回転</title> <link rel="stylesheet" type="text/css" href="position.css"> </head> <body> <div id="picture"><p><img src="back.png" alt="背景"></p> <div id="up"><p><img src="jpg_rotate.jpg" alt="回転の画像"></p> </div> </div> </body> </html>
CSS部
@charset "utf-8"; /* CSS Document */ #picture{ margin:30px auto; width: 600px; height: 450px; position:relative; } #up{ position: absolute; top: 50px; left: 310px; width: 200px; height: 100px; opacity: 0.5;/*半透明*/ /*以下回転*/ transform:rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); }
結果は以下
jpg画像自体は透明できないファイルの種類なので透明できずに白い部分が見えますが、全体としては透過できるようです。