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

Posted by Readiz
2014.02.19 19:13 Creation/Design

  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는 지원하지 않는다는 것인데, 그냥 버리면 속 편합니다 (...)


저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 회전 이미지 덕분에 공부하고 갑니다. 제 블로그에 한번 적용을 해봤는데 재미있네요.

    추가로 말씀드리면 이미지는 아래와 같이 코드를 사용하면 원형 썸브 이미지를 만들수 있습니다.
    CSS에 추가하면 썸브네일은 항상 원형이미지로 나오게 됩니다.

    썸브네일 이미지 크기가 100px 이라면
    height: 100px;
    width: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius:50px;
    border-radius: 50px;

    참고하세요

티스토리 툴바