Поворот изображения или div при нажатии навигатора

Я искал способ повернуть изображение в div, скажем, на 90 градусов при нажатии на ссылку, но, похоже, вообще не могу его получить. Вот некоторый код, который я пробую в данный момент среди многих других, используя плагин jQuery Rotate.

$('#canvas a').click(function() {
    $('#circle').rotateLeft([angle=90]);
    return false;
});

Я могу заставить его работать с css3, хотя он не анимируется и вращается только один раз. Я хотел бы продолжать вращаться каждый раз, когда нажимается ссылка.

 $(document).ready(function(){
    $("#canvas a").click(function(){
        $('#circle img').css({"-webkit-transform" : "rotate(45deg)"})
    });     
 });

jquery css rotation
person malicedix    schedule 15.09.2011    source источник
comment
Этот сайт может быть вам полезен.   -  person Joseph Marikle    schedule 16.09.2011
comment
Кажется, я на правильном пути, хотя я не понимаю, как связать такую ​​анимацию с щелчком по другому элементу.   -  person malicedix    schedule 16.09.2011
comment
Я думаю, вы добавляете/удаляете класс для достижения этого   -  person Joseph Marikle    schedule 16.09.2011

Ответы (2)


arrow_upward
2
arrow_downward

Вы имеете в виду что-то вроде этого?

http://jsfiddle.net/C5tDu/3/

ключ css следующий:

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
person Joseph Marikle    schedule 15.09.2011

arrow_upward
0
arrow_downward

Добавьте оператор + перед значением поворота:

$(document).ready(function(){
        $("#canvas a").click(function(){
            $('#circle img').css({"-webkit-transform" : "rotate(+=45deg)"})
        });     
 });
person akashivskyy    schedule 15.09.2011
comment
Пробовал это, хотя это все еще происходит только один раз и не анимируется. - person malicedix; 16.09.2011