Question

我使用javascript / html / css创建了一副卡片 - 我正在玩css动画来处理卡片，翻转它们等等。这是网站http://dalydd.com/projects/deckofcards.html（请查看我的'chrome' m只使用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过渡和动画与现代化可以创建所有开发人员可以使用的东西。目前还没有人解释过这个问题，但我不确定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);

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

1 个答案: