위키
포럼
도구
바뀐글
랜덤

"CSS 그림 회전"의 두 판 사이의 차이

잔글 (로봇: 자동으로 텍스트 교체 (-http://jmnote.com/css/ +http://zetawiki.com/ex/css/))
잔글 (봇: 자동으로 텍스트 교체 (-==참고 자료== +==참고==))
 
35번째 줄: 35번째 줄:
*[[CSS 애니메이션]]
*[[CSS 애니메이션]]


==참고 자료==
==참고==
*http://www.w3schools.com/css/css3_intro.asp
*http://www.w3schools.com/css/css3_intro.asp
*http://www.w3schools.com/css/css3_animations.asp
*http://www.w3schools.com/css/css3_animations.asp


[[분류: CSS]]
[[분류: CSS]]

2017년 6월 27일 (화) 00:56 기준 최신판

CSS 그림 회전

1 예시 1[ | ]

<style> 
#my_image {
  -webkit-animation:my_image 6s;
}
@-webkit-keyframes my_image {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(720deg) }
}
</style>
<img id="my_image" src="/w/images/jmnote_logo.png" />

2 예시 2[ | ]

<style> 
#my_image {
  -webkit-animation:my_image 6s;
}
@-webkit-keyframes my_image {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(-180deg); } 
  100% { -webkit-transform: rotate(360deg) }
}
</style>
<img id="my_image" src="/w/images/jmnote_logo.png" />

3 같이 보기[ | ]

4 참고[ | ]

원본 주소 "https://zetawiki.com/w/index.php?title=CSS_그림_회전&oldid=266688"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}