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「變形」設置動畫效果。你必須改寫「全部」。

如果你這樣做，那麼你應該有一個工作翻轉卡:)

享受。