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

Question

我已经翻了一张翻牌。但是当你点击“按卡”时旋转效果不起作用

任何人都可以帮助我吗？

DEMO

Answer 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

Answer 2

你试着关注一些文章吗？

  

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

     

http://davidwalsh.name/css-flip

希望这有帮助！

Answer 3

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

如果你这样做那么你应该有一张工作翻转卡：）

享受。