CSS rotateX在Chrome瀏覽器中反轉比Safari，IE，Edge，Firefox

我想添加一個動畫，看起來像老虎機旋轉。我的問題是我希望所有的數字從底部旋轉到頂部。這個提琴手適用於所有瀏覽器，但鉻。 Chrome從上到下旋轉數字。CSS rotateX在Chrome瀏覽器中反轉比Safari，IE，Edge，Firefox

如果我添加-webkit-前綴，那麼它會在Safari中反轉它。有任何想法嗎？

基本上我試圖從關鍵幀

transform: rotateX(-72deg) translateZ(20px);

到

transform: rotateX(72deg) translateZ(20px);

2017-04-13 welc0199

在你的問題中的開始和結束狀態是相同的。此外，他們不符合你的提琴手演示... –

這是我張貼後數秒編輯。我不知道什麼時候更新stackoverflow，以便其他人可以看到。轉換是從-72deg到72deg。看更多細節的提琴手。 – welc0199

-1

根據需要Javascript在效果上測試用戶代理注入safari- How can I differentiate Safari and Chrome in CSS?只有班或在你的情況下只鉻。

if (navigator.userAgent.indexOf('Chrome') != -1) { 
    $('.carousel').addClass('chrome-only'); 
}

2017-04-13 18:20:32

回答