「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部}~
&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を画像にする
と、記述してしまったものの、色々な方法が考えられます。
|外側CSSの背景画像|外側HTMLの画像|載せる側のCSSの背景画像|載せる側のHTMLの画像|
これを全部記述したら、2^4通りで16通りです・・・。正確にいえば、少なくとも一つは画像にするとしたら余事象計算になり、2^4-1の15通りです。
ハイ。イヤです。全部はやりたくありません。
決めます。~
1つ目
|外側CSSの背景画像|外側HTMLの画像|載せる側のCSSの背景画像|載せる側のHTMLの画像|
|×|○|×|○|
2つ目
|外側CSSの背景画像|外側HTMLの画像|載せる側のCSSの背景画像|載せる側のHTMLの画像|
|○|×|○|×|
ぐらいやりましょうか。~
**1つ目 外側HTML画像＋載せる側HTML画像
&color(red){ちなみに回転の画像はpng画像であり、右半分は透過している状態です。}~
~
&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"><p><img src="back.png" alt="背景"></p>
<div id="up"><p><img src="rotate_half.png" alt="回転文字"></p>
</div>
</div>
</body>
</html>
&u(){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);
}
結果次のようになりました。
#image(width=400,003.png)
**2つ目 外側CSS背景画像＋載せる側CSS背景画像
&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部}
#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);
}
結果次のようになりました。
#image(width=400,004.png)
~
~
はい。両方とも似たような感じになりました。※少しずれましたが、おそらくCSSのリセットファイルを読み込んでいないため、少しずれたとおもわれます。
*こんなことも試してみる
**BOXを透過
&color(red){UP側のCSSのボックスを赤にしました。}
&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"><p><img src="back.png" alt="背景"></p>
<div id="up">
</div>
</div>
</body>
</html>
&u(){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);
}
**透過pngを透過
&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"><p><img src="back.png" alt="背景"></p>
<div id="up"><p><img src="rotate_half.png" alt="回転の画像"></p>
</div>
</div>
</body>
</html>
&u(){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);
}
**jpeg画像を透過
&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"><p><img src="back.png" alt="背景"></p>
<div id="up"><p><img src="jpg_rotate.jpg" alt="回転の画像"></p>
</div>
</div>
</body>
</html>
&u(){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);
}
前回記事[[boxの配置方法]]をさらに発展させていきたいと思います。
次のようなものを作ります。
#image(width=400,002.png)
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を画像にする
と、記述してしまったものの、色々な方法が考えられます。
|外側CSSの背景画像|外側HTMLの画像|載せる側のCSSの背景画像|載せる側のHTMLの画像|
これを全部記述したら、2^4通りで16通りです・・・。正確にいえば、少なくとも一つは画像にするとしたらの余事象の計算になり、2^4-1の15通りです。
ハイ。イヤです。全部はやりたくありません。
決めます。~
1つ目
|外側CSSの背景画像|外側HTMLの画像|載せる側のCSSの背景画像|載せる側のHTMLの画像|
|×|○|×|○|
2つ目
|外側CSSの背景画像|外側HTMLの画像|載せる側のCSSの背景画像|載せる側のHTMLの画像|
|○|×|○|×|
ぐらいやりましょうか。~
**1つ目 外側HTML画像＋載せる側HTML画像
&color(red){ちなみに回転の画像はpng画像であり、右半分は透過している状態です。}~
~
&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"><p><img src="back.png" alt="背景"></p>
<div id="up"><p><img src="rotate_half.png" alt="回転文字"></p>
</div>
</div>
</body>
</html>
&u(){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);
}
結果次のようになりました。
#image(width=400,003.png)
**2つ目 外側CSS背景画像＋載せる側CSS背景画像
&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部}
#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);
}
結果次のようになりました。
#image(width=400,004.png)
~
~
はい。両方とも似たような感じになりました。※少しずれましたが、おそらくCSSのリセットファイルを読み込んでいないため、少しずれたとおもわれます。
*こんなことも試してみる
**BOXを透過
&color(red){UP側のCSSのボックスを赤にしました。}~
&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"><p><img src="back.png" alt="背景"></p>
<div id="up">
</div>
</div>
</body>
</html>
&u(){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);
}
結果は以下
#image(width=400,005.png)
**透過pngを透過
&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"><p><img src="back.png" alt="背景"></p>
<div id="up"><p><img src="rotate_half.png" alt="回転の画像"></p>
</div>
</div>
</body>
</html>
&u(){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);
}
結果は以下
#image(width=400,006.png)
**jpeg画像を透過
&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"><p><img src="back.png" alt="背景"></p>
<div id="up"><p><img src="jpg_rotate.jpg" alt="回転の画像"></p>
</div>
</div>
</body>
</html>
&u(){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);
}
結果は以下
#image(width=400,007.png)
&color(red){jpg画像自体は透明できないファイルの種類なので透明できずに白い部分が見えますが、全体としては透過できるようです。}
