©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS3 3D Transform</title>
	<style>
		div {
			height: 150px;
			width: 200px;
			margin: 10px;
		}
		#origin { border: 3px solid black; }
		.rotate {
			background-color: #87CEFA;
			border: 3px solid red;
		}
		#rotate_01 {
			-webkit-transform: rotateZ(20deg);
			transform: rotateZ(20deg);
		}
		#rotate_02 {
			-webkit-transform: rotateZ(40deg);
			transform: rotateZ(40deg);
		}
		#rotate_03 {
			-webkit-transform: rotateZ(60deg);
			transform: rotateZ(60deg);
		}
		#rotate_04 {
			-webkit-transform: rotateZ(80deg);
			transform: rotateZ(80deg);
		}
		#rotate_05 {
			-webkit-transform: rotateZ(100deg);
			transform: rotateZ(100deg);
		}
		#rotate_06 {
			-webkit-transform: rotateZ(120deg);
			transform: rotateZ(120deg);
		}
		#rotate_07 {
			-webkit-transform: rotateZ(140deg);
			transform: rotateZ(140deg);
		}
		#rotate_08 {
			-webkit-transform: rotateZ(160deg);
			transform: rotateZ(160deg);
		}
		#rotate_09 {
			-webkit-transform: rotateZ(180deg);
			transform: rotateZ(180deg);
		}
	</style>
</head>

<body>

	<h1>rotateZ() 메소드를 이용한 요소의 회전</h1>

	<div id="origin">이 요소의 원래 모양입니다.</div>
	<div id="rotate_01" class="rotate">이 요소는 원래 모양에서 z축을 기준으로 y축의 양의 방향으로 20도만큼 회전했습니다.</div>
	<div id="rotate_02" class="rotate">이 요소는 원래 모양에서 z축을 기준으로 y축의 양의 방향으로 40도만큼 회전했습니다.</div>
	<div id="rotate_03" class="rotate">이 요소는 원래 모양에서 z축을 기준으로 y축의 양의 방향으로 60도만큼 회전했습니다.</div>
	<div id="rotate_04" class="rotate">이 요소는 원래 모양에서 z축을 기준으로 y축의 양의 방향으로 80도만큼 회전했습니다.</div>
	<div id="rotate_05" class="rotate">이 요소는 원래 모양에서 z축을 기준으로 y축의 양의 방향으로 100도만큼 회전했습니다.</div>
	<div id="rotate_06" class="rotate">이 요소는 원래 모양에서 z축을 기준으로 y축의 양의 방향으로 120도만큼 회전했습니다.</div>
	<div id="rotate_07" class="rotate">이 요소는 원래 모양에서 z축을 기준으로 y축의 양의 방향으로 140도만큼 회전했습니다.</div>
	<div id="rotate_08" class="rotate">이 요소는 원래 모양에서 z축을 기준으로 y축의 양의 방향으로 160도만큼 회전했습니다.</div>
	<div id="rotate_09" class="rotate">이 요소는 원래 모양에서 z축을 기준으로 y축의 양의 방향으로 180도만큼 회전했습니다.</div>

</body>

</html>