CSS3 rotateY没有过渡应用

我正在寻找一种简单的方法来取得一个对象，并转换其rotateY属性没有它动画到其预先设置的过渡。 This will help me complete this slide show（只能查看Chrome或Safari（WEBKIT））CSS3 rotateY没有过渡应用

这里有效果的细分例如：

CSS - 过渡设置为5秒

1阶段

部件1 - rotateY：0;

Element2 - rotateY：-180;

用户 - 点击按钮

相位2

元素1 - 旋转Y：180;

Element2 - rotateY：0;

三期

元素1 - 旋转Y：-180;

Element2 - rotateY：0;

用户 - 点击按钮

Phase4

元素1 - 旋转Y：0;

Element2 - rotateY：180;

第一过渡（阶段1 & 2）完成的部件1需要旋转Y的值，使得它在位置元素2是在阶段1被设置为-180没有过渡之后。通过这个动画可以让元素看起来像在我提供的示例链接上看到的那样旋转。不幸的是，在所有元素都有自己的rotateY：180;

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

我需要一个解决方案，只是需要将对象从点没有任何动画/过渡

希望所有有道理

来源

2011-07-27 Richard

对不起理查德。我只是不明白你想要什么。您提供的幻灯片链接看起来不错。简单地说，你试图改变它的工作方式是什么部分。 – tw16

这里是一个jsFiddle例子[1]：http：//jsfiddle.net/2XU7D/21/。这对我的概念并不完全正确，但_hopefully_它会说明问题。 ** test **元素最初设置为'rotateY：180;'。然后onClick应该使用'-webkit-transition：0;'和''rotateY：0;''使用'-webkit-transition：.5s;'进入'rotateY：90;'。但它失败了，我认为这是由于代码在被后者覆盖之前无法采取行动。这是一个简单的例子，我知道:) – Richard

对不起，使用此链接，而不是[1]：http：//jsfiddle.net/2XU7D/25/ – Richard

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

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

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

活生生的例子在旋转时没有显示出转变：http://jsfiddle.net/2XU7D/4/

来源

2011-08-02 13:45:02 tw16

“使用正确的语法”是指“旋转（180deg）”而不是“rotateY（180deg）”？实际上，'rotate（x，y）'是'rotateX（x）的快捷方式;旋转Y（Y）;'。见http://www.w3.org/TR/css3-2d-transforms/，第6点。 – Johnny5

@ johnny5：你是对与错的，因为它发生。看看你的链接的[Point 4]（http://www.w3.org/TR/css3-2d-transforms/#transform-functions），你会看到它提供了与我给出的相同的语法。 'rotateX'和'rotateY'用于3d变换http://www.w3.org/TR/css3-3d-transforms/#transform-functions不是2d（这是你的链接去的地方）。但是，谢谢你，我没有想到他正在做3D转换，因为我大多数使用的Firefox不支持它们。 – tw16

我已经编辑了我的问题以上，希望将事情明确化:) – Richard

或者，你可以做一两件事，创建了两个类B：

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

并检查你想要的事件类。

来源

2011-07-27 19:50:40 Franz

嗨弗兰兹，谢谢你的回答。我现在看看 – Richard

使用类没有工作。我应该更多地考虑你的帖子，并且意识到你重申我可以做我已经完成的课程。我也更新了我上面的问题。 – Richard

CSS3 rotateY没有过渡应用

回答

相关问题