골

이미지를 돌려요 ~

마우스를 대면 이미지가 돌아가는 효과 입니다.

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개

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

팁게시판

6,077건

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

+
제목 글쓴이 날짜 조회
12-02-16 조회 2,339
12-02-03 조회 1,251
12-01-31 조회 1,015
12-01-24 조회 1,072
12-01-17 조회 1,894
12-01-05 조회 1,460
11-12-30 조회 949
11-12-23 조회 2,469
11-12-08 조회 1,216
11-12-07 조회 2,170
11-11-27 조회 1,771
11-11-25 조회 1,995
11-11-23 조회 1,401
11-11-22 조회 1,414
11-11-09 조회 1,257
11-10-23 조회 1,302
11-10-19 조회 1,339
11-10-08 조회 1,099
11-10-04 조회 981
11-10-04 조회 3,328
11-09-01 조회 2,667
11-08-13 조회 973
11-08-06 조회 1,688
11-07-11 조회 2,042
11-06-27 조회 1,489