如何在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" />