Toggle Rotate Image

Question

У меня есть изображение стрелки в списке навигации. Я хочу, чтобы код, когда он щелкнул, повернет на 90 градусов по часовой стрелке вниз, и если он снова щелкнет, он вернется в исходное положение. Я знаю, что это простая задача, но я немного забыл о CSS3/Script отношениях.

Спасибо за помощь.

Answer 1

Вы можете использовать JS для изменения кодов в CSS или HTML (с использованием <style>) Я считаю.

Если вы знаете, как повернуть изображение с помощью CSS, вы должны быть хорошими.

Таким образом, когда пользователь нажимает стрелку, изменить CSS для изображения

Answer 2

Это будет вращать изображение на 90 градусов до тех пор, пока не пришел полный круг

var angle = 0, img = document.getElementById('image'); 
 
document.getElementById('button').onclick = function() { 
 
    angle = (angle+90)%360; 
 
    img.className = "rotate"+angle; 
 
}

#image { 
 
    transform-origin: top left; /* IE 10+, Firefox, etc. */ 
 
    -webkit-transform-origin: top left; /* Chrome */ 
 
    -ms-transform-origin: top left; /* IE 9 */ 
 
} 
 
#image.rotate90 { 
 
    transform: rotate(90deg) translateY(-100%); 
 
    -webkit-transform: rotate(90deg) translateY(-100%); 
 
    -ms-transform: rotate(90deg) translateY(-100%); 
 
} 
 
#image.rotate180 { 
 
    transform: rotate(180deg) translate(-100%,-100%); 
 
    -webkit-transform: rotate(180deg) translate(-100%,-100%); 
 
    -ms-transform: rotate(180deg) translateX(-100%,-100%); 
 
} 
 
#image.rotate270 { 
 
    transform: rotate(270deg) translateX(-100%); 
 
    -webkit-transform: rotate(270deg) translateX(-100%); 
 
    -ms-transform: rotate(270deg) translateX(-100%);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="button">Click me!</button> 
 
<img src="http://www.rachelgallen.com/images/autumntrees.jpg" width="300" height="auto" id="image" />

Answer 3

http://codepen.io/damianocel/pen/BooXPJ

@ Rachel Спасибо за этот бит JS, я кое-что чему-то научился.

Однако, когда речь заходит о вращающихся элементах, я всегда буду идти с CSS и добавлять класс в событие триггера, это пусть код, то выше, что хочет исходный плакат с несколькими строками, я добавил toggleClass и дал чтобы сделать его гладким. И lol, отображая кнопку «block», поэтому изображение не скрывает ее при вращении.

.rotate { -webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-o-transition-duration:0.5s;width="300" height="auto" id="image"} 

.rotateclick {преобразование: поворот (90deg);}

кнопку {дисплей: блок;}