[CSS] 원형 이미지 마스크 & transform 속성으로 회전시키기

  CSS는 HTML5가 되면서, 그리고 IE6이 퇴출되면서 웹 디자인에 새로운 가능성을 열어주고 있습니다.

원형 이미지 마스크 & transform 속성으로 마우스 오버시 회전시키기

  다른 말 필요가 없을 듯 합니다. 이 블로그 상단부에도 이러한 속성을 적용시킨 이미지들이 있지만, 모바일에서 오시는 분들을 위해서 한번 밑에다가 보여드리겠습니다.

  어때요? 마우스를 올리면 180도 회전합니다. 그리고 원형으로 마스크를 씌워서 실제로는 원형이지 않은(소스 확인해보세요) 이미지를 원형으로 만든 것입니다. 실제 적용 코드는 아래와 같습니다.

	
img.rotate {
  width: 100px;
  border-radius: 50em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out; 
  -o-transition: all 0.3s ease-in-out; 
  -ms-transition: all 0.3s ease-in-out; 
  transition: all 0.3s ease-in-out; 
}
img.rotate:hover {
  -webkit-transform: rotate(180deg); 
  -moz-transform: rotate(180deg); 
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
} 
	

  참쉽죠? 코드는 그다지 어렵지 않지만 결과물은 꽤나 좋은 예시입니다. CSS의 border-radius로 이미지를 원형으로 만들고, transition 속성으로 돌아갈 때 ease를 줍니다. 그리고 hover속성으로 180도 회전하게 만들죠.

  단점은 구버전의 IE는 지원하지 않는다는 것인데, 그냥 버리면 속 편합니다 (...)