Question

我一直在寻找一种方法来旋转图像，当点击一个链接时，一个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)"})
    });     
 });

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

单击导航时旋转图像或div

2 个答案: