嘗試使用css3和jQuery動畫/翻轉紙牌組合

Question

我使用javascript/html/css創建了一副紙牌 - 我正在玩css動畫來處理紙牌，翻轉紙牌等。以下是網站http://dalydd.com/projects/deckofcards.html （請在Chrome瀏覽器中查看，因爲我只使用webkit前綴）

如果您點擊dealcards按鈕，它會將卡交易到兩個不同的部分 - 一個是（電腦播放器），另一個是單個播放器）動畫處理完成我試圖翻轉牌的玩家部分顯示實際的卡而不是背面的卡或後面的div這裏是我的HTML和CSS

<section class="wrapper" style="top: 1px; left: 1px; z-index: 1;"><div class="clubs  eight" data-value="8">eight of clubs<span>8</span></div><div class="back"></div></section> 

每個部分代表一個卡有每節一個卡蓋，另一個用於實際的卡面

這裏內兩個div是CSS

#deck section.wrapper.player.flip { 
-webkit-perspective:500; 
-webkit-transform: rotateY(180deg); 
-webkit-transform-style: preserve-3d; 
-webkit-transition: all 1.0s linear; 
    } 

我幾乎沒有我想要它像你在這裏看到的工作http://css3.bradshawenterprises.com/flip/

任何幫助是讚賞，因爲我很新的CSS動畫，但看到很多與js工作的潛力。

Answer 1

這涉及到如果它存在父級的css-webkit轉換 - 如果您事先爲包括父項的多個屬性設置動畫，這可能會非常棘手。我只看到了css 3動畫的基本示例和教程，但沒有任何相當真實的世界。我希望使用cizer轉換和動畫與modernizer可以創建一些開發人員可以使用的東西。沒有人能夠很好地解釋這一點，但我不確定css 3轉換的哪些屬性先於其他轉換 - 這將是一個全新的探索世界。

如果你再次檢查我的網站http://dalydd.com/projects/deckofcards.html它應該現在工作 - 我動畫的元素是從先前的動畫繼承css屬性，我對它做了封裝，所以我將樣式添加到父項和我正在動畫的項目中並且我寫出了每個css屬性而不是使用速記

-webkit-backface-visibility: hidden; 
-webkit-transition-duration: 1s; 
-webkit-transition-timing-function: ease-in-out; 
-webkit-transition-delay: 0s; 
-webkit-transform: rotateX(1deg);