CSS動畫中的翻轉效果不起作用

Question

我做了一張翻頁卡。 但是，當您單擊“按卡”時，旋轉效果不起作用

誰能幫我？

演示

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;
}

密碼筆

Answer 2

您是否嘗試關注一些文章？

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

http://davidwalsh.name/css-flip

希望這會有所幫助！

Answer 3

我修復了您的代碼。 這是CSS的微小變化。 您不能為CSS“變換”制作動畫，因為它不是support屬性。 您必須改寫“全部”。

如果這樣做，那么您應該有一個可以使用的翻轉卡:)

請享用。