Wednesday 1 May 2013

image rotation using css3

<Doctype html>
<html>
<head>
<style>
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate{
from{
-moz-transform: rotate(0deg);
}
to{
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate{
from{
-moz-transform: rotate(0deg);
}
to{
-moz-transform: rotate(360deg);
}
}

.star
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:        5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;

-moz-animation-name:             rotate; 
    -moz-animation-duration:        5s;
    -moz-animation-iteration-count:  infinite;
    -moz-animation-timing-function: linear;

-ms-animation-name:             rotate; 
    -ms-animation-duration:        5s;
    -ms-animation-iteration-count:  infinite;
    -ms-animation-timing-function: linear;

}
</style>
</head>
<body>
<img class="star" src="images.jpg">
</body>
</html>
for image please click this link http://upload.wikimedia.org/wikipedia/commons/3/3b/Star_icon.png

we can also rotate image using this below code
<Doctype html>
<html>
<head>
<style>
img { position: absolute; width: 25px; height: 25px; 
  -moz-animation: 3s rotate infinite linear  ;
  -moz-transform-origin: 50% 50%; 
  -webkit-animation: 3s rotate infinite linear  ;
  -webkit-transform-origin: 50% 50%;  
}

@-moz-keyframes rotate {
    0    { -moz-transform: rotate(0); } 
    100% { -moz-transform: rotate(360deg); }  
}

@-webkit-keyframes rotate {
    0%    { -webkit-transform: rotate(0); }
    100% { -webkit-transform: rotate(360deg); } 
}
</style>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3b/Star_icon.png">
</body>
</html>