0

変換原点を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');
        }
4

3 に答える 3

2

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-14T15:00:48.413 に答える
0

正しくない人はいないし、ブラウザをサポートする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-14T14:48:29.557 に答える
0

おそらく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%")."
于 2012-12-14T14:55:36.453 に答える