CSS 3卡片翻轉動畫錯誤鉻19-21第一動畫

我有一個非常奇怪的問題。我爲我的投資組合做了一個css 3 cardflip動畫。在Firefox中一切正常，但由於某種原因，第一張卡片在動畫方向上有錯誤。正如你所看到的，左邊的圖片顯示錯誤的動畫，拉伸錯誤，而右邊的圖片是完美的。所有的卡片都是由腳本創建的，所以在html標記或css中不會有差別。CSS 3卡片翻轉動畫錯誤鉻19-21第一動畫

任何想法？我可以提供什麼樣的信息來幫助解決這個問題？

乾杯盧卡斯

Animation

來源

2012-08-31 Lukas Oppermann

同樣也發生在我身上，所以我更新我的Chrome瀏覽器有一些bug很多鉻版本，所以我更新我的鉻和工作正常... –

我正在運行21.0.1180.82，噸帽子應該是相當新的，對吧？ –

好的我正在使用23.0.1243.2 m.Hey你能給我鏈接，所以我可以測試你的CSS轉換，因爲我有類似的CSS，它的工作很好希望我能解決你的問題 –

更新

.card flip 
    { 
     text-decoration: none; 
     text-align: center; 
     float: left; 
     position: relative; 
     display: block; 
     z-index: 30; 
    }

刪除perspective和webkit-perspective他們造成錯誤

來源

2012-09-01 09:40:19

它工作，謝謝。但是有必要爲其他部分增加視角。 '''.card-flip .front，.screen .card-flip：hover .back { \t -webkit-transform：perspective（600px）rotateY（0deg）; }''' AND '''.card-flip .back { \t -webkit-transform：perspective（600px）rotateY（-180deg）; }''' –

感謝分享 –

CSS 3卡片翻轉動畫錯誤鉻19-21第一動畫

回答

相關問題