rotate 함수
rotate() 함수는 요소를 지정된 각도로
회전시킵니다. transform
속성과 함께 사용됩니다.
속성 값은 각도 단위를 사용합니다. 양수 값은 시계 방향으로,
음수 값은 반시계 방향으로 회전시킵니다.
회전은 transform-origin
속성으로 지정된 점을 중심으로 수행됩니다.
구문
선택자 {
transform: rotate(각도);
}
예시
이 예시에서 블록은 시계 방향으로 30
도 회전합니다:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
예시
이 예시에서 블록은 반시계 방향으로 30
도 회전합니다:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
예시
이 예시에서 블록은 마우스를 올리면 1
바퀴 회전합니다. 회전 값이 1turn로 지정되었기 때문입니다 (같은 효과를 내려면
회전 각도를 360deg로 지정하면 됩니다).
부드러운 회전을 위해
transition 속성을 추가했습니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
