위키
포럼
도구
바뀐글
랜덤

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

잔글 (로봇: 자동으로 텍스트 교체 (-http://jmnote.com/css/ +http://zetawiki.com/ex/css/))
2번째 줄: 2번째 줄:


==예시 1==
==예시 1==
*예제: http://jmnote.com/css/rotate-image.php
*예제: http://zetawiki.com/ex/css/rotate-image.php
<source lang='html5'>
<source lang='html5'>
<style>  
<style>  
17번째 줄: 17번째 줄:


==예시 2==
==예시 2==
*예제: http://jmnote.com/css/rotate-image2.php
*예제: http://zetawiki.com/ex/css/rotate-image2.php
<source lang='html5'>
<source lang='html5'>
<style>  
<style>  

2015년 7월 19일 (일) 16:35 판

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=139186"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}