将 css3 变换添加到当前 css3 变换值答案

【问题标题】：adding css3 transforms to current css3 transform value将 css3 变换添加到当前 css3 变换值
【发布时间】：2013-04-26 06:45:30
【问题描述】：

我有这个元素，在执行某个javascript函数后，会将其css转换值：

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

我如何通过 javascript 以

的形式获取该值

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

我真正想要实现的是我想在 mouseenter 上添加一个“rotate(360deg)”。我想如果我掌握它当前的变换值，我将能够实现这一点。

:hover 伪类无法解决问题，因为它会被-webkit-transform 的当前值覆盖

编辑：

我忘了提到这实际上是针对我正在做的一个插件。翻译值通过 html 数据属性设置，并通过 jQuery 的.data() 提取。

【问题讨论】：

不了解jQuery； $(element).css("-webkit-transform") 或 $(element).css("webkitTransform") 会有帮助吗？
这将返回一个不是我真正想要的矩阵。
$(element).css() 虽然与“定义”不完全相同，但似乎返回“计算”样式，应该与原始转换具有相同的效果：jsfiddle.net/s5NTU

标签： javascript css css-transforms

【解决方案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 类。

【讨论】：

不幸的是，我无法将其与 javascript 隔离，因为转换值是通过 html 数据属性设置的。我忘了提到我正在创建一个插件，并且 translateX、translateY、比例是由用户设置的。

【解决方案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 Demo

【讨论】：