CSS 그림 회전

CSS 그림 회전

1 예시 1

• 예제: http://zetawiki.com/ex/css/rotate-image.php

html

Copy

<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

• 예제: http://zetawiki.com/ex/css/rotate-image2.php

html

Copy

<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 같이 보기

• CSS 애니메이션

4 참고

• http://www.w3schools.com/css/css3_intro.asp
• http://www.w3schools.com/css/css3_animations.asp