添加css3轉換為當前css3轉換值

Question

我有這個元素，在執行某個javascript函數后，會將其css轉換為：

-webkit-transform : translateX(25px) translateY(25px) scale(1);

我如何通過javascript的形式獲得該值

"translateX(25px) translateY(25px) scale(1)" ？

我真正想要實現的是我想在rotate(360deg)上添加“ rotate(360deg) ”。 我想如果我抓住它當前的變換值，我將能夠實現這個目標。

：hover偽類不會起作用，因為它將被-webkit-transform的當前值覆蓋

編輯：

我忘了提到這實際上是我正在做的插件。 翻譯值通過html數據屬性設置，並通過jQuery的.data()提取。

Answer 1

如果值是固定的而不是由腳本計算的，我認為更好的選擇是保持css形式的javascript，所以不要在腳本中硬編碼動畫值，而只需創建幾個css規則，例如

.transformed {
  -webkit-transform: translateX(25px) translateY(25px) scale(1);
}
.transformed:hover {
  -webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg);
}

執行第一個腳本后，只需將.transformed類添加到元素中。
然后你可以離開偽類:hover為你工作，而不需要使用javascript來完成這項任務。

否則，如果您還需要在mouseleave上保持360deg度旋轉，只需將最后一條規則更改為

.transformed.mouseenter {
  -webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg);
}

並在.mouseenter事件上添加.mouseenter類。

Answer 2

我不確定你的問題的上下文是什么，但聽起來你需要使用css3轉換庫，例如jQuery Transit，因為你大量使用Javascript。 例子：

$(".box").on("mouseenter", function () {

    $(".box").transition({x: '+=25', y: '+=25', scale: 1.5, rotate: 360 }, 500);

});

$(".box").on("mouseleave", function () {

    $(".box").transition({x: '-=25', y: '-=25', scale: 1, rotate: 0 }, 500);

});


var scaleFactor = 0.25;

$(".boxGrow").on("click", function () {

    $(".boxGrow").transition({scale: '+=' + scaleFactor }, 500);

});

JSFiddle演示