添加css3转换到当前css3转换值

adding css3 transforms to current css3 transform value

本文关键字：转换 css3 添加      更新时间：2023-09-26

我有一个元素，在执行某个javascript函数后，将使其css转换值为:

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

如何通过javascript以

的形式获得该值

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

我真正想要实现的是，我想在鼠标输入上添加一个"rotate(360deg)"。我想我将能够实现这一点，如果我抓住它的当前变换值。

:hover伪类不能做到这一点，因为它将被-webkit-transform

的当前值覆盖。编辑:

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

如果值是固定的，而不是由脚本计算，我认为一个更好的选择是保持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类

我不确定你的问题的背景是什么，但听起来你需要使用一个css3过渡库，如jQuery过境，因为你正在大量使用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);
});
<<h2> JSFiddle演示/h2>
相关文章：