将CSS3转换添加到当前的CSS3转换值中

Question

我有一个元素，在执行某个javascript函数后，会将其css transform值设置为：

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

如何通过javascript以"translateX(25px) translateY(25px) scale(1)"的形式获取该值？

我的真正目的是在鼠标进入时添加"rotate(360deg)"。我认为，如果我获得其当前的变换值，就能实现这一点。

:hover伪类不起作用，因为它将被-webkit-transform的当前值覆盖。

编辑：

我忘了提到这实际上是为了一个插件。翻译值是通过html data-attributes设置并通过jQuery的.data()提取的。

- AJ Naidas

---

不了解jQuery；$(element).css("-webkit-transform") 或 $(element).css("webkitTransform") 有用吗？ - Passerby

返回一个矩阵，这并不是我想要的。 - AJ Naidas

虽然不完全相同于“定义”，$(element).css()似乎返回“计算”样式，其效果应与原始转换相同：http://jsfiddle.net/s5NTU/ - Passerby

Answer 1

如果这些值是固定的，而不是由脚本计算得出的，我认为更好的选择是从 JavaScript 中保持 CSS，因此您可以简单地创建一些 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上保持360度旋转，请将最后一条规则更改为

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

在鼠标进入事件中，只需添加.mouseenter类。

- Fabrizio Calderan

---

很遗憾，我无法将它从javascript中移除，因为变换值是通过HTML数据属性设置的。我忘了提到我正在创建一个插件，translateX、translateY和scale都是由用户设置的。 - AJ Naidas

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演示

- Gaff