[css] 도형을 회전시키는 애니메이션을 만들어보자

---

 

css 만으로도 약간의 애니메이션 기능을 넣을 수 있답니다.

신기하죠?

 

그럼 바로 시작해볼까요?

css 도형 회전 시키기

 

---

1. transform

회전한 도형

div:hover{ transform: rotate(45deg); }

transform 기능을 이용해 도형을 회전시켜보겠습니다. 

 

사실 css의 속성 이름은 굉장히 직관적입니다. 영어라서 괜히 어려워 보이는 것뿐이랍니다. 한글로 써본다면 조금 더 이해하기 쉬울 겁니다.

 

div:hover{ 변형 : 회전 (45도) }

 

영어가 동사라 정확한 번역은 아니지만 중요한 부분이 아니니 넘어가겠습니다. 의미는 같으니까 말입니다. 어떠신가요? 한글로 보니까 조금 더 이해하기 쉽지 않나요? 변형하는데 45도로 회전하겠다는 의미라는 게 잘 보이죠.

---

2. 실제 적용

 

실제 적용된 코드로 애니메이션을 만들어봤습니다. 마우스를 올려보면서 확인해보시기 바랍니다.

 

320x100

 

[같이 보면 좋은 글]

[coding/html + css] - [css] transform을 이용해 뒤집는 애니메이션 만들기

[css] transform을 이용해 뒤집는 애니메이션 만들기

 

[coding/html + css] - css에서 transition을 이용해서 부드러운 전환 효과를 넣어보자!

css에서 transition을 이용해서 부드러운 전환 효과를 넣어보자!

---

그럼 이만.

총총.