hELLO 블로그 꾸미기 "프로필 사진 회전시키기"

 

 

블로그 이름과 닉네임을 변경했다. 그냥 별 이유 없이 갑자기 변경하고 싶어서 후다닥 바꿨다.

프로필 사진에 있는 강아지는 우리집 강아지 동동이다. 그래서 블로그 이름도 동동이가 들어간 이름으로 짓고 싶어서 또 대충 생각나는 대로 지었다.

아무튼! 동동에게 마우스를 올리면 코 똑 떼먹고 싶은 동동이가 삥그르 돌아가면 좋겠어서 CSS 편집을 했다.

 

일단 프로필에 적용된 CSS 아이디를 개발자 도구로 찾는다.

아주 쉽게 rounded-full 이란 CSS를 찾았다!

그리고 CSS 편집하는 곳으로 들어가 해당 아이디를 검색한다.

 

검색하고 나서 원하는 이벤트와 css를 주면 끝이다! 나의 경우엔 동동이가 천천히 돌면 좋겠어서 .rounded-full에 trasition 속성을 줬고, 마우스를 오버했을때 이놈이 돌아가야하니 :hover 이벤트를 줬다.

우! 사진을 계속 보고 있으니 오랜만에 동동이가 아주 보고싶군.

 

 

 

---

Reference

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성