javascript - jQuery on click css3 旋转

Question

我需要让图像旋转，其变换原点为 50% 50%。以下是正确的吗？它似乎对我不起作用。

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

Answer 1

我会在 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/

Answer 2

您可能可以使用 jQuery 来实现，但我建议您使用 Greensock 来制作动画：

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

性能要好得多，旋转之类的东西轻而易举。在选择器的末尾使用 .get(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%")."

Answer 3

没有人不正确，它适用于支持 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');
    }