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沒有過渡應用

回答

相關問題