Làm thế nào để Xoay ảnh liên tục?

Question

) Tôi có hình ảnh ngôi sao ở trên cùng bên trái màn hình của tôi muốn xoay liên tục. vì vậy bất cứ ai có thể cho tôi biết Làm thế nào chúng ta có thể làm cho một hình ảnh xoay liên tục cho các trình duyệt Mozilla Firefox, Google chrome !? [Css loại Chức vụ là 'Tuyệt đối' và hình ảnh độ phân giải: 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; 
} 

Thêm -moz-transform/animation, -ms-transform/animation, v.v ... để hỗ trợ các trình duyệt khác.

Bạn cũng có thể tạo GIF động :).

Answer 2

Hãy thử điều này http://code.google.com/p/jquery-rotate/

Và bạn có thể làm theo cách này:

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

Answer 3

Bạn có thể làm điều đó với CSS: (sử dụng GPU lõi của bạn):

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

Bạn có thể sử dụng RaphaelJS, vì nó tương thích với nhiều trình duyệt. Ví dụ, đoạn mã này sẽ làm việc:

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

Xem http://jsfiddle.net/AJgrU/ cho một ví dụ.

Answer 5

một ví dụ làm việc jsFiddle với hình ảnh động CSS3 và biến đổi: 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); } 
} 

(xin lỗi, sao tôi không phải là thực sự tốt làm trung tâm)