Question

我正在寻找一种简单的方法来获取一个对象并转换它的rotateY属性，而不用它动画到它的预设转换。 This will help me complete this slide show（仅在CHROME或SAFARI（WEBKIT）中查看）

以下是效果的细分示例：

CSS - 过渡设置为5s

阶段1

Element1 - rotateY：0;

Element2 - rotateY：-180;

用户 - 点击按钮

阶段2

Element1 - rotateY：180;

Element2 - rotateY：0;

阶段3

Element1 - rotateY：-180;

Element2 - rotateY：0;

用户 - 点击按钮

Phase4

Element1 - rotateY：0;

Element2 - rotateY：180;

在第一次转换（第1阶段和第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; }

并检查您想要该活动的课程。

CSS3 rotateY未应用过渡

2 个答案: