CSS3 rotateY没有应用转换

我正在寻找一种简单的方法来获取对象并转换其rotateY属性,而无需将其动画化为其预先设置的过渡。 这将帮助我完成此幻灯片演示(仅查看CHROME或SAFARI(WEBKIT))

以下是效果的细分示例:

CSS - 转换设置为5秒

阶段1

Element1 - rotateY:0;

Element2 - rotateY:-180;

用户 - 单击按钮

阶段2

Element1 - rotateY:180;

Element2 - rotateY:0;

三期

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点即可,无需任何动画/转场

希望一切都有意义


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

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

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

实时示例在旋转时不显示转换:http://jsfiddle.net/2XU7D/4/


或者你可以做一件事,创建两个类:

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

并检查你想要的事件。

链接地址: http://www.djcxy.com/p/71215.html

上一篇: CSS3 rotateY without transitions applied

下一篇: Java LibGDX: How to get a map based coordinate system?