CSS3 rotateY未应用过渡 [英] CSS3 rotateY without transitions applied
问题描述
我正在寻找一种简单的方法来获取一个对象并转换它的rotateY属性，而不用它动画到它的预设转换。 这将帮助我完成此幻灯片放映（仅查看CHROME或SAFARI（WEBKIT）） ）
I'm looking for a simple way to take an object and transform its rotateY property without it animating to its pre-set transition. This will help me complete this slide show (ONLY VIEW IN CHROME OR SAFARI (WEBKIT))
以下是效果的细分示例：
Here's a breakdown example of the effect:
CSS - 转换是设置为5s
CSS - Transition is set to 5s
阶段1
Element1 - rotateY：0;
Element1 - rotateY:0;
Element2 - rotateY：-180;
Element2 - rotateY:-180;
用户 - 点击按钮
阶段2
Element1 - rotateY：180;
Element1 - rotateY:180;
Element2 - rotateY：0;
Element2 - rotateY:0;
第3阶段
Element1 - rotateY：-180;
Element1 - rotateY:-180;
Element2 - rotateY：0;
Element2 - rotateY:0;
用户 - 点击按钮
阶段4
Element1 - rotateY：0;
Element1 - rotateY:0;
Element2 - rotateY：180;
Element2 - rotateY:180;
首先过渡（阶段1& 2）完成 Element1 的rotateY值需要设置为-180而不进行转换，以使它位于Phase1中位于 Element2 的位置。有了这个，动画将使元素看起来彼此旋转，就像我在我提供的示例链接上看到的那样。不幸的是，在所有元素都具有rotateY后，效果停止：180;
After first transition (phase1 & 2) completes the rotateY value of Element1 needs to be set to -180 without a transition so that it's in the position Element2 was in in Phase1. With this the animation will make the elements appear to spin around one another as you can see on the example link I have supplied. Unfortunately the effect ceases after all elements have their rotateY:180;
我想做一个jsFiddle，但我现在还没有时间在这个项目上。
I'd like to do a jsFiddle but I really haven't time right now on this project.
我需要一个解决方案，只需将对象从a点移到b，不需要任何动画/过渡
希望一切都有意义
推荐答案
如果你试图在没有转换的情况下旋转对象，那么你应该根本没有设置过渡。只设置转换：
If you are trying to rotate an object without a transition, then you should not be setting a transition at all. Only set the transform:
$(this).css('-webkit-transform','rotateY(180deg)');
$(this).css('-webkit-transform','rotateY(0)');
旋转时不显示转换的实例： http://jsfiddle.net/2XU7D/4/
Live example to show no transition when rotated: http://jsfiddle.net/2XU7D/4/
这篇关于CSS3 rotateY未应用过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
