<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
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>
No comments:
Post a Comment