如何在JavaScript中圍繞自己的軸旋轉圖像360度？

Question

我已經嘗試了兩天現在找到一種方法來旋轉我的圖像，而我輸入一個按鈕。我想要的幫助是幫助我獲得代碼，以Javascript的形式旋轉圖像，調用images[0]圍繞自己的軸。我知道這可能看起來很難，但我已經嘗試過，我真的需要專業人士的幫助。

Answer 1

Paul S has provided a much better answer。

這裏是HMTML基於Xotic750的的jsfiddle，here is an example使用animation一個在

#container { 
    position: relative; 
    width: 450px; 
    -webkit-perspective: 1000px; 
    -moz-perspective: 1000px; 
    -o-perspective: 1000px; 
    perspective: 1000px; 
} 
#card { 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: all 1.0s linear; 
    -moz-transform-style: preserve-3d; 
    -moz-transition: all 1.0s linear; 
    -o-transform-style: preserve-3d; 
    -o-transition: all 1.0s linear; 
    transform-style: preserve-3d; 
    transition: all 1.0s linear; 
} 
#container:hover #card, #container.hover_effect #card { 
    -webkit-transform: rotateY(90deg); 
    -moz-transform: rotateY(90deg); 
    -o-transform: rotateY(90deg); 
    transform: rotateY(90deg); 
} 

<div id="container"> 
    <div id="card"> 
     <img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" /> 
    </div> 
</div> 

jsfiddle

Answer 2

旋轉圖像90度

CSS的示例nd @keyframes（使用-webkit-前綴，修改爲其他瀏覽器）。

CSS

@-webkit-keyframes r { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); } 
} 
#r:hover ~ img { 
    -webkit-animation: r 2s infinite linear; 
} 

@-webkit-keyframes y { 
    0% { -webkit-transform: rotateY(0deg); } 
    100% { -webkit-transform: rotateY(360deg); } 
} 
#y:hover ~ img { 
    -webkit-animation: y 2s infinite linear; 
} 

HTML

<button id="r">R</button> 
<button id="y">Y</button> 
<br/> <br/> 
<img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />