2

我正在寻找一种简单的方法来获取一个对象并转换它的 rotateY 属性，而不用动画到它的预设过渡。这将帮助我完成此幻灯片放映（仅在 Chrome 或 SAFARI（WEBKIT）中查看）

这是效果的细分示例：

CSS - 过渡设置为 5s

阶段1

元素1 - 旋转Y：0；

元素2 - 旋转Y：-180；

用户- 点击按钮

阶段2

元素1 - 旋转Y：180；

元素2 - 旋转Y：0；

第三阶段

元素1 - 旋转Y：-180 ；

元素2 - 旋转Y：0；

用户- 点击按钮

第四阶段

元素1 - 旋转Y：0；

元素2 - 旋转Y：180；

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

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

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

希望一切都有意义

4

2 回答 2

3

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

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

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

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

于 2011-08-02T13:45:02.703 回答
0

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

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

并检查你想要的事件类。

于 2011-07-27T19:50:40.677 回答