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旋轉

回答

相關問題