如何使图片连续旋转？

Question

）我的屏幕左上方有一个星形图像想要连续旋转。所以任何人都可以告诉我如何让图片连续旋转浏览器Mozilla Firefox，Google Chrome！？ [Css位置类型为'绝对'且图像分辨率：25 * 25]

Answer 1

@-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;
}

添加-moz-transform/animation，-ms-transform/animation等规则以支持其他浏览器。

您还可以制作动画GIF：）。

更新

动画支持是最新的浏览器，这意味着可以删除前缀：

（反向旋转翻转'from'和'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;
}

简写：

img.star {
    animation: rotate 0.5s infinite linear;
}

Answer 2

你可以用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">


    

Answer 3

你可以使用RaphaelJS，因为它是跨浏览器兼容的。例如，此代码应该有效：

<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>

有关示例，请参阅http://jsfiddle.net/AJgrU/。

Answer 4

使用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); } 
}

（对不起，我的明星并没有真正集中精力）

Answer 5

试试这个http://code.google.com/p/jquery-rotate/

你可以这样做：

 var angle = 1;
  $(document).ready(function() {
        setInterval(function() {
                $("#pic").rotate(angle);
             }, 100);
 });