Safari、IE、Edge、FirefoxよりChromeでCSS rotateXが逆転する

Question

私は、スロットマシンの回転のように見える入力時にアニメーションを追加しようとしています。私の問題は、すべての数字を下から上に回転させたいということです。このフィドラーは、すべてのブラウザで動作しますが、クロムです。 Chromeは数字を上から下に回転させます。

私が-webkit-接頭辞を追加すると、Safariでそれを元に戻します。何か案は？

は基本的に私はあなたにはJavaScriptを有効にユーザーエージェントをテストする必要がHow can I differentiate Safari and Chrome in CSS?によると

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

Fiddler

Answer 1

に

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

からキーフレームを設定しようとしているsafari-を注入唯一のクラスまたはあなたのケースではクロムのみ。

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