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

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

谁能帮帮我?

DEMO

【问题讨论】:

标签: 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“转换”设置动画,因为它不是支持属性。您必须改为写“全部”。

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

享受。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2010-11-27
    • 2015-06-04
    • 2012-10-27
    • 2013-11-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多