Javascript 如何让图片连续旋转？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10123700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Make a Picture rotate Continuously?
提问by Alireza29675
) I have a star image in top-left of my screen want to rotate continuously. so can anyone tell me How can we make a Picture rotate Continuously for browsers Mozilla Firefox, Google chrome!? [Css Position type is 'Absolutely' and image resolution:25*25 ]
) 我的屏幕左上角有一个星星图像想要连续旋转。所以谁能告诉我如何让浏览器的图片连续旋转 Mozilla Firefox、Google chrome！？[Css 位置类型为“绝对”，图像分辨率：25*25 ]
回答by Frank van Wijk
@-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.
添加-moz-transform/animation、-ms-transform/animation等规则以支持其他浏览器。
You could also make an animated GIF :).
您还可以制作动画 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;
}
回答by vsync
You can do that with CSS: (utilizing your GPU core):
你可以用 CSS 做到这一点：（利用你的 GPU 核心）：
img{
transform-origin:50% 50%;
animation:2s rotateRight infinite linear;
}
@keyframes rotateRight{
100%{ transform:rotate(360deg); }
}<img src="https://ih0.redbubble.net/image.364229144.1663/flat,200x200,075,t.jpg">
回答by pp19dd
You could use RaphaelJS, since it's cross-browser compatible. For example, this code should work:
您可以使用 RaphaelJS，因为它是跨浏览器兼容的。例如，此代码应该可以工作：
<div id="paper" style="width:300px; height:200px"></div>
<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" 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.
有关示例，请参见http://jsfiddle.net/AJgrU/。
回答by Fabrizio Calderan
a jsFiddle working example with CSS3 animations and transforms: http://jsfiddle.net/GcjKZ/1/http://jsfiddle.net/GcjKZ/3/
带有 CSS3 动画和转换的 jsFiddle 工作示例：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)
（对不起，我的星星不是很好地居中）
回答by coder
Try this http://code.google.com/p/jquery-rotate/
试试这个http://code.google.com/p/jquery-rotate/
And you can do this way:
你可以这样做：
var angle = 1;
$(document).ready(function() {
setInterval(function() {
$("#pic").rotate(angle);
}, 100);
});
