원형 이미지 호버시 이미지 회전효과 주기

원형 이미지 호버시 이미지 회전효과 주기

원형 이미지에 마우스를 갖다 대면 이미지가 회전되는 효과입니다.

저의 테마에 코드를 참조하시면,

.index-thumbnail {

width: 110px;

height: 110px;

overflow: hidden;

float: left;

position: relative;

z-index: 1;

margin: 0 15px 0 0;

-moz-border-radius: 55px; /* 원형으로 이미지 만듬 */

-webkit-border-radius: 55px;

border-radius: 55px;


/* box-shadow: 5px 5px 5px lightgray; */ /*이미지 그림자효과 */

border: 1px dotted #ddd;

/* 회전은 아래 코드입니다. */

-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;


}

.index-thumbnail:hover { /*마우스 호버시 회전 */

-webkit-transform: rotate(180deg);


-moz-transform: rotate(180deg);


-o-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);

}