How to Make a Picture rotate Continuously?
You could use RaphaelJS, since it's cross-browser compatible. For example, this code should work:
<div id="paper" style="width:300px; height:200px"></div>
<script type="text/javascript" src="(link to downloaded copy of raphaeljs)"></script>
<script type="text/javascript">
var paper = Raphael("paper");
var good_cat = paper.image( "http://pp19dd.com/_old/lily.png",40,20,96, 145);
var evil_cat = paper.image( "http://pp19dd.com/_old/cookie.png",160,20,96, 145);
var angle = 0;
setInterval( function() {
angle += 45;
good_cat.stop().animate( { "transform": "R" + angle }, 300, "<>" );
}, 500 );
setInterval( function() {
r = parseInt(Math.random() * 359);
evil_cat.stop().animate( { "transform": "R" + r }, 300, "<>" );
}, 1000 );
</script>
See http://jsfiddle.net/AJgrU/ for an example.
a jsFiddle working example with CSS3 animations and transforms: http://jsfiddle.net/GcjKZ/1/
http://jsfiddle.net/GcjKZ/3/
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); }
}
(sorry, my star is not really well centered)
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
img.star {
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
Add -moz-transform/animation
, -ms-transform/animation
, etc rules to support other browsers.
You could also make an animated GIF :).
Update
Animation support is available is most current browsers which means that the prefixes can be removed:
(For reverse rotation flip the 'from' and 'to')
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
img.star {
animation-name: rotate;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
Shorthand:
img.star {
animation: rotate 0.5s infinite linear;
}
You can do that with CSS: (utilizing your GPU core):
img{
animation:2s rotate infinite linear;
}
@keyframes rotate{
100%{ transform:rotate(1turn) } // or 360deg
}
<img src="https://ih0.redbubble.net/image.364229144.1663/flat,200x200,075,t.jpg">