Здравствуйте. Такая вот проблема. Нужно, что бы, после нажатия на картинку она все время переворачивалась на 90 градусов. я реализовал это так: Код (Text): <sctipt> function rotate(id){ document.getElementById(id).className = 'rotate'; } </script> <style> .rotate{ -webkit-transform: rotate(90deg); max-width: 141px; max-height: 95px; float: left; margin: 5px; } </style> <img src='' class='image-preview' id=".$i." onclick='rotate(id)'/> Проблема в том, что это работает один раз. Я один раз нажимаю на картинку и она поворачивается на 90 градусов. Если буду нажимать еще то ничего не происходит. Помогите поправить. Что не так?
Вы каждый раз вызываете поворот на 90 градусов в абсолютном значении. И удивляетесь, что "работает только один раз"? Каждое нажатие говорит картинке не "повернись еще на 90 градусов", а "повернись на 90 градусов вообще".
Изменить свое понимание слова "реализовал", для начала. Реализовал бы сам, уже бы знал, что нужно менять. У тебя даже тег "<script>" написан с ошибкой. Странно, что вообще работало.. Лови, самое простое, что на ум пришло, за 15 минут накиданное: https://jsfiddle.net/4vsv65ab/
или можно так JS Код (Text): function rotate(obj, step, time){ if(typeof(obj) != 'object') return false; time = time || 0.3; step = step || 90; obj.deg = (obj.deg + step) || step; obj.style['-webkit-transition'] = obj.style['-o-transition'] = obj.style['-moz-transition'] = obj.style['-ms-transition'] = time + 's'; obj.style['-webkit-transform'] = obj.style['-o-transform'] = obj.style['-moz-transform'] = obj.style['-ms-transform'] = 'rotateZ(' + obj.deg + 'deg)'; } HTML Код (Text): <img onclick="rotate(this, 90, 1)" src="http://php.ru/forum/download/file.php?avatar=41172_1377271764.png"/> Аватарка идеально подходит под скрипт )