我在动画变换 rotateX 和 rotateY 时遇到问题。我正在使用 GSAP jQuery 插件。
基本上执行这个：
$(element).animate({transform: "rotateX(-180deg)"});
和执行的效果一样：
$(element).animate({transform: "rotateX(180deg)"});
我确实设置了透视图，以防你想知道。
是否有一种特殊的方式必须定义负值或者这是一个错误？
更新：我找到了这里提到的属性“shortRotationX”和“shortRotationY”：http://codepen.io/GreenSock/pen/ydIgf
但这似乎是一种临时解决方法。我想知道使用 jQuery + GSAP 动画旋转的正确方法是什么。 谢谢你们！ 凯里尔
【问题讨论】：
标签： javascript jquery jquery-animate transform gsap
此问题已在 GreenSock 论坛 http://forums.greensock.com/topic/9099-cannot-animate-rotate-negative-jquery-gsap/#entry36552 中得到解答
就浏览器的变换矩阵而言，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"}
【讨论】：
它应该具有相同的效果。将对象旋转 180 度，其显示方式与将其旋转 -180 度时的显示方式相同。
我给你举了一个简单的例子，如果它能让你明白的话：
Fiddle here（只是 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 */
}
【讨论】：