CSS3 旋转Y 没有应用过渡

Question

我正在寻找一种简单的方法来获取对象并转换其rotateY 属性，而无需对其预设的过渡进行动画处理。 这将帮助我完成此幻灯片（仅在 Chrome 或 SAFARI (WEBKIT) 中查看） )

下面是效果的细分示例：

CSS - 过渡设置为 5s

Phase1

Element1 -rotateY:0;

Element2 - 旋转Y：-180；

用户 - 单击按钮

阶段2

元素1 - 旋转Y：180；

Element2 - 旋转Y：0；

Phase3

Element1 - 旋转Y：-180；

Element2 - 旋转Y：0；

用户 - 单击按钮

阶段4

Element1 -rotateY:0;

元素2 - 旋转Y：180；

第一次转换（phase1 和 2）完成后，Element1 的rotateY 值需要在没有转换的情况下设置为 -180，以便它位于 Element2 在 Phase1 中的位置。这样，动画将使元素看起来彼此旋转，正如您在我提供的示例链接中看到的那样。不幸的是，在所有元素都有其rotateY：180之后，效果就会停止；

我想做一个 jsFiddle 但我现在真的没有时间做这个项目。

我需要一个解决方案，只需将对象从 a 点带到 b 点，无需任何动画/过渡

希望一切都有意义

Answer 1

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

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

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

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

Answer 2

或者，您可以做一件事，创建两个类：

.enable{ -webkit-transform : rotateY(180deg); -webkit-transition : 10s; }
.disable{ -webkit-transform : rotateY(0deg); -webkit-transition : 0; }

并检查您想要事件的类。