Jak sprawić, aby obraz obracał się w sposób ciągły?

Question

) Mam obraz gwiazdy w lewym górnym rogu ekranu, który chce się obracać w sposób ciągły. więc czy ktoś może mi powiedzieć Jak możemy sprawić, żeby obraz obracał się nieustannie dla przeglądarek Mozilla Firefox, Google chrome !? [Css typu stanowisko jest 'Absolutnie' i rozdzielczości obrazu: 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; 
} 

Dodaj -moz-transform/animation, -ms-transform/animation itd. Zasady obsługi innych przeglądarek.

Można również utworzyć animowany GIF :).

Answer 2

Spróbuj http://code.google.com/p/jquery-rotate/

I można to zrobić w ten sposób:

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

Answer 3

można to zrobić z CSS: (wykorzystując swoją rdzeń 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

Można użyć RaphaelJS, ponieważ jest kompatybilny z różnymi przeglądarkami. Na przykład, ten kod powinien działać:

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

Zobacz http://jsfiddle.net/AJgrU/ dla przykładu.

Answer 5

przykład roboczych jsFiddle z animacji CSS3 i przemienia: 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); } 
} 

(przepraszam, moja gwiazda nie jest naprawdę dobrze wyśrodkowany)