动画旋转否定（jQuery GSAP）

Question

我遇到动画变换rotateX和rotateY的问题。我正在使用GSAP jQuery插件。

基本上执行这个：

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

与执行相同的效果：

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

我确实有透视设置，以防你想知道。

我是否有一种特殊的方法来定义负值或者这是一个错误吗？

更新：我在此处找到了一个属性“shortRotationX”和“shortRotationY”：http://codepen.io/GreenSock/pen/ydIgf

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

Answer 1

在http://forums.greensock.com/topic/9099-cannot-animate-rotate-negative-jquery-gsap/#entry36552

的GreenSock论坛上回答了这个问题

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”已被弃用，它使用更直观的语法，也可用于指定顺时针或逆时针运动：

//OLD
{shortRotationX:-180}

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

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

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

Answer 2

它应该具有相同的效果。如果将物体旋转-180度，将以相同的方式显示旋转物体180度。

我给你举了一个简单的例子，如果它清除了你：

小提琴here（只是HTML＆amp; 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 */
}