css动画中的翻转效果不起作用答案

【问题标题】：Flip effect in css animation doesn't workcss动画中的翻转效果不起作用
【发布时间】：2014-01-06 12:57:45
【问题描述】：

我制作了一张翻转卡片。但是点击“按卡”时的旋转效果不起作用

谁能帮帮我？

DEMO

【问题讨论】：

完美运行...你想要发生什么？
旋转效果。翻牌无效果
你可以在这里找到它......stackoverflow.com/questions/10035643/…

标签： jquery html css keyframe css-animations

【解决方案1】：

转场设置错误，改成

.cci-press-card__wrap {
  position: relative;
  width: 300px;
  height: 380px;
  margin: 0 auto;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}

CodePen

【讨论】：

点击后可以立即翻转而不是显示backface然后翻转吗？
就是这样！非常感谢

【解决方案2】：

你会尝试关注一些文章吗？

http://css3.bradshawenterprises.com/flip/

http://davidwalsh.name/css-flip

希望这能有所帮助！

【讨论】：

这应该是一条评论

【解决方案3】：

我修复了你的代码。这是一个很小的 CSS 更改。您不能为 CSS“转换”设置动画，因为它不是支持属性。您必须改为写“全部”。

如果你这样做了，那么你应该有一张有效的翻转卡:)

享受。

【讨论】：