画像を連続的に回転させる方法は？

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を作成することもできます:)。

Answer 2

このhttp://code.google.com/p/jquery-rotate/

を試してみて、あなたはこの方法を行うことができます。

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

Answer 3

あなたは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 4

ブラウザ間で互換性があるため、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 5

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

（申し訳ありませんが、私のスターは本当によくセンタリングされていない）