jQuery点击css3旋转

我需要让图像旋转，其变换原点为50％50％。以下是否正确？它似乎不适合我。jQuery点击css3旋转

 function slideUp_Menu(){ 
        $('.main_nav').slideUp('slow', function(){ 
         $("#arrow_up").css({ "-webkit-transform": "rotate(180deg)" }); 
         $("#arrow_up").css("-webkit-transform-origin", "50% 50%"); 
        });// $('.tab_wrapper').animate({ marginTop: '193px' }, 500, 'linear'); 
     }

来源

2012-12-14 Alex

没有人它的不正确和它的WebKit支持浏览器！

function slideUp_Menu(){ 
       $('.main_nav').slideUp('slow', function(){ 
        $("#arrow_up").css({ "-moz-transform": "rotate(180deg)" }); 
        $("#arrow_up").css("-moz-transform-origin", "50% 50%"); 
        $("#arrow_up").css({ "-webkit-transform": "rotate(180deg)" }); 
        $("#arrow_up").css("-webkit-transform-origin", "50% 50%"); 
        $("#arrow_up").css({ "transform": "rotate(180deg)" }); 
        $("#arrow_up").css("transform-origin", "50% 50%"); 
       });// $('.tab_wrapper').animate({ marginTop: '193px' }, 500, 'linear'); 
    }

来源

2012-12-14 14:48:29

未经测试！ ;）：P :(:) –

你也许可以用jQuery做，但我建议你使用使用GreenSock为动画：

https://www.greensock.com/gsap-js/

的表现远远好，像旋转的东西是一件轻而易举的事。使用获得（0）在你选择的结束和jQuery是一个很好的合作伙伴:)

TweenMax.to($("#arrow_up").get(0), {css:{rotation:180}});

如果你想在这里转换原点的样子：

https://www.greensock.com/get-started-js/ 
"transformOrigin – Sets the origin around which all transforms occur. By default, it is in the center of the element ("50% 50%")."

来源

2012-12-14 14:55:36 Eirinn

未经测试的代码！ :) – Eirinn

你甚至不需要'.get（0）'，TweenMax接受jQuery包装的对象/选择。 –

我将过渡添加到您的类在CSS例如：

transition: transform 1s ease;

然后创建另一个类，并在那里设置的转换例如：

transform: rotate(10deg);

然后，我会使用jQuery添加/删除类如：

$(document).on('click', 'selector', function() { 
$(this).addClass('class with transform'); 
});

请注意，在你的CSS选择器中的所有浏览器的前缀。

Js小提琴：http://jsfiddle.net/FhXj6/

来源

2012-12-14 15:00:48

jQuery点击css3旋转

回答

相关问题