「divのboxの上にさらにboxを追加し、回転させる」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
前回記事[[boxの配置方法]]をさらに発展させていきたいと思います。
次のようなものを作ります。
divの中にdivを追加し、中側のdivを回転させるというものです。
※画像処理で作ればいいじゃん。とお思いの方もいらっしゃると思います。わたくしもそれは思いますが、まあ、phpやmysqlを使って、この回転させた画像を定期的に変える！ということが可能になるためにhtmlでどう表現するかを色々とまとめていきたいと思います。
#contents
*boxの配置
まずはボックスを配置してみましょう。わかりやすいように背景のところは灰色、ボックスはひとまず赤にします。~
&u(){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>
&u(){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;
}
結果は以下
#image(width=400,001.png)
まずはできました。
*中のboxの回転
次に回転です。
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);
}
結果は以下
#image(width=400,002.png)
回転できました。~
&color(red){boxの中心を中心とし、マイナスを付けると反時計回りに、プラスにすると時計回りに回転します。}
その他にも様々なものがあります。
rotate(○○deg)2Dの回転角度
rotateX(○○deg)X軸を軸とする回転
rotateY(○○deg)Y軸を軸とする回転
rotateZ(○○deg)Z軸を軸とする回転
rotate3d(数値, 数値, 数値,○○deg)3D回転
画像や文字等を入れないとわかりづらいかもしれません。
*中のboxを画像にする
*こんなことも試してみる
**BOXを透過
**透過png画像を透過
**jpeg画像を透過
画像DL元：http://www.photo-ac.com/main/detail/168489?title=%E6%8C%87%E3%81%95%E3%81%99%E5%A5%B3%E6%80%A76
前回記事[[boxの配置方法]]をさらに発展させていきたいと思います。
次のようなものを作ります。
divの中にdivを追加し、中側のdivを回転させるというものです。
※画像処理で作ればいいじゃん。とお思いの方もいらっしゃると思います。わたくしもそれは思いますが、まあ、phpやmysqlを使って、この回転させた画像を定期的に変える！ということが可能になるためにhtmlでどう表現するかを色々とまとめていきたいと思います。
#contents
*boxの配置
まずはボックスを配置してみましょう。わかりやすいように背景のところは灰色、ボックスはひとまず赤にします。~
&u(){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>
&u(){CSS部}~
&color(red){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;
}
結果は以下
#image(width=400,001.png)
まずはできました。
*中のboxの回転
次に回転です。
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);
}
結果は以下
#image(width=400,002.png)
回転できました。~
&color(red){boxの中心を中心とし、マイナスを付けると反時計回りに、プラスにすると時計回りに回転します。}
その他にも様々なものがあります。
rotate(○○deg)2Dの回転角度
rotateX(○○deg)X軸を軸とする回転
rotateY(○○deg)Y軸を軸とする回転
rotateZ(○○deg)Z軸を軸とする回転
rotate3d(数値, 数値, 数値,○○deg)3D回転
画像や文字等を入れないとわかりづらいかもしれません。
*中のboxを画像にする
*こんなことも試してみる
**BOXを透過
**透過png画像を透過
**jpeg画像を透過
画像DL元：http://www.photo-ac.com/main/detail/168489?title=%E6%8C%87%E3%81%95%E3%81%99%E5%A5%B3%E6%80%A76
