Javascript 设置负旋转动画（jQuery GSAP）

我在设置transform rotateX和rotateY的动画时遇到问题。我正在使用GSAPjQuery插件

基本上是这样：

$(element).animate({transform: "rotateX(-180deg)"});

具有与执行相同的效果：

$(element).animate({transform: "rotateX(180deg)"});

我已经设置好了视角，以防你想知道

是否有一种特殊的方法来定义负值，或者这是一个bug

更新：我发现这里提到的属性“shortRotationX”和“shortRotationY”：

然而，这似乎是一个临时的解决办法。我想知道使用jQuery+GSAP设置旋转动画的正确方法是什么。 谢谢你们！

---

Kyryll

它应该有同样的效果。将对象旋转180度时的显示方式与将其旋转180度时的显示方式相同

我给你举了一个简单的例子，如果它能让你明白：

Fiddle（只是HTML和CSS），这样您就可以看到它具有相同的效果

div {
    width:200px;
}

#rotate1 {
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */
}

#rotate2 {
height:100px;
background-color:red;
/* Rotate div */
transform:rotate(-180deg);
-ms-transform:rotate(-180deg); /* IE 9 */
-webkit-transform:rotate(-180deg); /* Opera, Chrome, and Safari */
}

---

它应该有同样的效果。将对象旋转180度时的显示方式与将其旋转180度时的显示方式相同

我给你举了一个简单的例子，如果它能让你明白：

Fiddle（只是HTML和CSS），这样您就可以看到它具有相同的效果

div {
    width:200px;
}

#rotate1 {
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */
}

#rotate2 {
height:100px;
background-color:red;
/* Rotate div */
transform:rotate(-180deg);
-ms-transform:rotate(-180deg); /* IE 9 */
-webkit-transform:rotate(-180deg); /* Opera, Chrome, and Safari */
}

---

这在格林斯托克论坛上得到了回答

就浏览器的变换矩阵而言，180的旋转与-180的旋转是相同的（请使用getComputedStyle（）亲自查看），因此，除非您利用GSAP的本机变换属性，如“rotationX”、“rotation”、“rotationY”等，否则无法真正区分两者之间的差异，GSAP可以为您正确跟踪所有内容。此外，它的速度更优化。因此：

//OLD
$(element).animate({transform: "rotateX(-180deg)"});

//NEW
$(element).animate({rotationX:-180});

//or use GSAP's native API:
TweenLite.to("#element", 0.4, {rotationX:-180});

此外，自从我们推出DirectionalRotationPlugin以来，“shortRotationX”就被弃用了，DirectionalRotationPlugin使用了更直观的语法，也可用于指定顺时针或逆时针移动：

//OLD
{shortRotationX:-180}

//NEW
{rotationX:"-180_short"}

//and to specify a clockwise direction:
{rotationX:"-180_cw"}

//or counter-clockwise:
{rotationX:"-180_ccw"}

---

这在格林斯托克论坛上得到了回答

就浏览器的变换矩阵而言，180的旋转与-180的旋转是相同的（请使用getComputedStyle（）亲自查看），因此，除非您利用GSAP的本机变换属性，如“rotationX”、“rotation”、“rotationY”等，否则无法真正区分两者之间的差异，GSAP可以为您正确跟踪所有内容。此外，它的速度更优化。因此：

//OLD
$(element).animate({transform: "rotateX(-180deg)"});

//NEW
$(element).animate({rotationX:-180});

//or use GSAP's native API:
TweenLite.to("#element", 0.4, {rotationX:-180});

此外，自从我们推出DirectionalRotationPlugin以来，“shortRotationX”就被弃用了，DirectionalRotationPlugin使用了更直观的语法，也可用于指定顺时针或逆时针移动：

//OLD
{shortRotationX:-180}

//NEW
{rotationX:"-180_short"}

//and to specify a clockwise direction:
{rotationX:"-180_cw"}

//or counter-clockwise:
{rotationX:"-180_ccw"}

---

这不使用动画。我同意元素的最终版本是相同的，但它们“到达”的方式不同。设置动画时，一个按时钟方向旋转，而另一个按逆时针方向旋转。看看你是否能在JSFIDLE中设置动画持续时间。啊，我明白了。我完全错误地理解了你的问题。。。不过我很高兴你让它工作了！这不使用动画。我同意元素的最终版本是相同的，但它们“到达”的方式不同。设置动画时，一个按时钟方向旋转，而另一个按逆时针方向旋转。看看你是否能在JSFIDLE中设置动画持续时间。啊，我明白了。我完全错误地理解了你的问题。。。不过我很高兴你让它工作了！