골

이미지를 돌려요 ~

· 2011-12-21 (수) 20:55:30 · 2819 · 1
마우스를 대면 이미지가 돌아가는 효과 입니다.

html5 에니메이션을 만들때 많이 이용 되고 있네요 ^^

초를 이미지에 맞게 설정해 주세요 ~ 

a {-webkit-transition: -webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out;transition: transform 0.4s ease-out;}

a:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg)}

간단하게 코드는 이렇게 됩니다.


테스트 링크 걸어 드리겠습니다 ^^

html 5 이용하시는 분들 참고 하세요 ~

ie8 이하는 되지 않습니다.
|

댓글 1개

제목이 좀 잘못되었네요 오타인듯... 아미지 -> 이미지
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
HTML 11-12-31 조회 3,012
HTML 11-12-30 조회 4,348
HTML 11-12-30 조회 4,852
HTML 11-12-30 조회 4,118
HTML 11-12-30 조회 4,736
HTML 11-12-30 조회 3,500
HTML 11-12-30 조회 2,565
HTML 11-12-30 조회 2,920
HTML 11-12-29 조회 2,420
HTML 11-12-22 조회 3,038
HTML 11-12-21 조회 2,820
HTML 11-12-20 조회 2,869
HTML 11-12-15 조회 5,051
HTML 11-12-15 조회 4,079
HTML 11-12-14 조회 6,738
기타 11-12-12 조회 3,920
HTML 11-12-12 조회 3,255
기타 11-12-05 조회 4,575
HTML 11-12-03 조회 3,214
JavaScript 11-12-02 조회 2,837
JavaScript 11-12-01 조회 2.1만
기타 11-11-30 조회 5,556
HTML 11-11-26 조회 3,026
HTML 11-11-19 조회 4,213
HTML 11-11-01 조회 3,107
HTML 11-10-23 조회 2,328
HTML 11-10-21 조회 2,251
HTML 11-10-15 조회 2,807
HTML 11-10-15 조회 2,457
HTML 11-10-15 조회 4,721