nicepaper @ ウィキ
nicepaper @ ウィキ

前回記事boxの配置方法をさらに発展させていきたいと思います。

次のようなものを作ります。

divの中にdivを追加し、中側のdivを回転させるというものです。 ※画像処理で作ればいいじゃん。とお思いの方もいらっしゃると思います。わたくしもそれは思いますが、まあ、phpやmysqlを使って、この回転させた画像を定期的に変える！ということが可能になるためにhtmlでどう表現するかを色々とまとめていきたいと思います。

boxの配置

まずはボックスを配置してみましょう。わかりやすいように背景のところは灰色、ボックスはひとまず赤にします。
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;	
}

結果は以下

まずはできました。

中の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);
}

結果は以下

回転できました。
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画像

ちなみに回転の画像は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);
}

結果次のようになりました。

2つ目　外側CSS背景画像＋載せる側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">
	<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のリセットファイルを読み込んでいないため、少しずれたとおもわれます。

こんなことも試してみる

BOXを透過

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);
}
結果は以下

透過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;
	opacity: 0.5;/*半透明*/
	/*以下回転*/
	transform:rotate(-20deg);
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
}
結果は以下

jpeg画像を透過

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画像自体は透明できないファイルの種類なので透明できずに白い部分が見えますが、全体としては透過できるようです。

「divのboxの上にさらにboxを追加し、回転させる」をウィキ内検索
最終更新：2015年05月19日 20:25