单击导航时旋转图像或div

Question

我一直在寻找一种方法，当一个链接被点击时，可以将图片旋转90度，但似乎根本不能让它转到那里。这是我目前正在尝试的一些代码，使用的是jQuery旋转插件。

$('#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)"})
    });     
 });

Answer 1

你是说像这样的东西吗？

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;

Answer 2

在旋转值之前添加+运算符：

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