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

Question

我使用 javascript/html/css 创建了一副纸牌 - 我正在使用 css 动画来处理纸牌、翻转纸牌等。这里是网站http://dalydd.com/projects/deckofcards.html（请在 chrome 中查看，因为我只是使用 webkit 前缀）

如果您点击发牌按钮，它会将牌发给两个不同的部分 - 一个用于（计算机玩家）另一个用于个人玩家）当动画交易完成时我正在尝试为玩家部分翻转牌显示实际卡片而不是卡片背面或背面 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-transition（如果存在） - 如果您预先为多个属性（包括父级）设置动画，这可能会变得非常棘手。我只看到了关于 css 3 动画的基本示例和教程，但还没有看到真正的世界。我希望将 css 过渡和动画与 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);