Как поворачивать изображение 360 градусов вокруг собственной оси в JavaScript?

Question

Я попытался в течение двух дней, чтобы найти способ поворота изображения, когда я вводил кнопку. Мне нужна помощь, чтобы помочь мне получить код для поворота изображения в Javascript под названием images[0] вокруг своей оси. Я знаю, что это может выглядеть тяжело, но я тоже пробовал, и мне действительно нужна помощь профессионалов.

Answer 1

Paul S has provided a much better answer.

Ниже приведен пример Поворот изображения на 90 градусов

CSS

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

HMTML

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

jsfiddle

Answer 2

На основе jsfiddle Xotic750 «с, here is an example использованием animation в 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" />