CSS / 애니메이션 / transform / rotate - 2D 회전시키기
transform / rotate
- transform의 rotate로 요소를 회전시킬 수 있습니다.
- 평면에서의 회전입니다.
- IE는 버전 10부터 지원합니다.
문법
|
1 |
transform: rotate( angle ) |
- angle에는 각의 크기를 입력합니다.
- 단위는 deg, rad, grad, turn 등을 사용합니다.
- turn은 1회전, 즉 360deg를 의미합니다.
예제
- 마우스를 올렸을 때 회전합니다. 회전하는 과정을 보기 위해 transition 속성을 추가했습니다.
- 각이 양수인 경우 시계방향으로 회전합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb { width: 100px; height: 100px; margin: 60px auto; background-color: orange; transition: all ease 1s; } .jb:hover { transform: rotate( 45deg ); } </style> </head> <body> <div class="jb"></div> </body> </html> |
- 각이 음수면 반시계 방향으로 회전합니다.
|
1 2 3 |
.jb:hover { transform: rotate( -45deg ); } |
- 각이 크게 하여 빙글빙글 돌게 하는 효과를 줄 수 있습니다.
|
1 2 3 |
.jb:hover { transform: rotate( 720deg ); } |
