单击导航时旋转图像或 div

发布于 2024-12-05 03:16:09 字数 445 浏览 0 评论 0原文

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

原文

I've been searching for a way to rotate an image a div say 90 degrees when a link is clicked, but can not seem to get it to at all. Here is some code I'm trying at the moment amongst many others, using the jQuery Rotate plugin.

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

I can get it to kind of work with css3, although it doesn't animate, and it only rotates once. I would like to keep rotating each time a link is clicked.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

相守太难 2024-12-12 03:16:09

你的意思是这样的吗？

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;

Do you mean something like this?

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

the key css is the following:

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;

回复收藏 0 原文

半夏半凉 2024-12-12 03:16:09

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

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

Add + operator before rotation value:

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

回复收藏 0 原文

~没有更多了~