<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 2D Transform</title>
<style>
div {
height: 150px;
width: 200px;
position: absolute;
margin: 30px
}
#origin { border: 3px solid black; }
#rotate {
background-color: #87CEFA;
border: 3px solid red;
transform: rotate(30deg);
transform: rotate(30deg);
transform: rotate(30deg);
}
</style>
</head>
<body>
<h1>rotate() 메소드를 이용한 요소의 회전</h1>
<div id="origin">이 요소의 원래 모양입니다.</div>
<div id="rotate">이 요소는 원래 모양에서 시계방향으로 30도만큼 회전하였습니다.</div>
</body>
</html>