尝试使用css3和jQuery设置卡片的动画/翻转卡片组

我已经用javascript/html/css创建了一副卡片-我正在玩css动画来处理卡片，翻转它们，等等。这里是网站（请在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>

我就快到了我希望它能像你看到的那样工作

---

非常感谢您的帮助，因为我对css动画非常陌生，但在使用js时看到了很多潜力。

这涉及到更改父对象的css-webkit转换（如果存在的话）-如果事先设置多个属性（包括父对象）的动画，这可能会变得非常棘手。我只看到了css3动画的基本示例和教程，但还没有看到真正的动画。我希望在modernizer中使用css转换和动画可以创建所有开发人员都可以使用的东西。还没有人解释过这一点，但我不确定css 3转换的哪些属性优于其他转换-这将是一个全新的探索世界

如果你再次检查我的网站，它现在应该可以工作了-我正在制作动画的元素继承了我在它的包装上制作的前一个动画的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); 

---

你的具体问题是什么？如何在动画结束时正确翻转卡片这里有一个教程-网站已关闭。。。你还有副本吗？你也可以在这里看到代码

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