0

我已经使用 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 时看到了很多潜力。

4

1 回答 1

0

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

如果你再次检查我的网站http://dalydd.com/projects/deckofcards.html它现在应该可以工作了 - 我正在制作动画的元素是从我在它的包装器上做的以前的动画继承 css 属性所以我将样式添加到parent 和我正在制作动画的那个，我写出了每个 css 属性，而不是使用速记

-webkit-backface-visibility: hidden;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0s;
-webkit-transform: rotateX(1deg);
于 2012-12-08T06:50:39.737 回答