jquery - 没有应用过渡的 CSS3 rotateY

Question

我正在寻找一种简单的方法来获取对象并转换其 rotateY 属性，而无需将其设置为预设过渡动画。 This will help me complete this slide show (只能在 Chrome 或 SAFARI(WebKIT)中查看)

这是效果的分割示例:

CSS - 过渡设置为 5 秒

第一阶段

Element1 - rotateY:0;

Element2 - rotateY:-180;

用户 - 点击按钮

第二阶段

Element1 - rotateY:180;

Element2 - rotateY:0;

第三阶段

Element1 - rotateY:-180;

Element2 - rotateY:0;

用户 - 点击按钮

第四阶段

Element1 - rotateY:0;

Element2 - rotateY:180;

在第一个转换(阶段 1 和 2)完成后，Element1 的 rotateY 值需要设置为 -180 而无需转换，以便它位于 Element2 所在的位置在第一阶段。有了这个动画将使元素看起来相互旋转，正如您在我提供的示例链接中看到的那样。不幸的是，在所有元素都具有 rotateY:180 之后效果停止；

我想做一个 jsFiddle，但我现在真的没有时间做这个元素。

我需要一个解决方案，它可以简单地将对象从 a 点带到 b 点，而无需任何动画/过渡

希望一切都有意义

Answer 1

如果您尝试在没有过渡的情况下旋转对象，那么您根本不应该设置过渡。只设置转换:

$(this).css('-webkit-transform','rotateY(180deg)');

$(this).css('-webkit-transform','rotateY(0)');

旋转时不显示过渡的实例:http://jsfiddle.net/2XU7D/4/