● 2차원 회전하기
rotate() 함수를 속성값으로 사용하면 요소를 회전할 수 있습니다. 인자로 각도를 넣는데, 양수 값을 넣으면 오른쪽으로 회전하고, 음수 값을 넣으면 왼쪽으로 회전합니다. 이번에는 다음에 배우는 transform-origin 속성에서도 사용하기 위해 새로운 예제 코드를 작성합니다.
06/08/transform-rotate.html
<style>
.container{
border:1px solid black;
display:inline-block;
margin:20px;
}
.box{
width:100px;
height:100px;
background-color:red;
}
.box:hover{
transform:rotate(30deg);
/* 오른쪽으로 회전 */
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
그림 6-83 실행결과
코드를 실행해 빨간색 요소에 마우스를 올리면 요소가 오른쪽으로 30도 회전합니다.