CSS rotateX在Chrome中反向旋转，而不是Safari，IE，Edge，Firefox

Question

我试图在输入上添加一个看起来像老虎机旋转的动画。我的问题是我希望所有数字从底部旋转到顶部。这个小提琴手适用于所有浏览器，但镀铬。 Chrome从上到下旋转数字。

如果我添加-webkit-前缀，那么它会在Safari中将其反转。有任何想法吗？

基本上我正在尝试从

创建关键帧

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

到

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

Fiddler

Answer 1

根据How can I differentiate Safari and Chrome in CSS?，您需要使用javascript来测试用户代理实际注入仅限于Safari的类，或仅在您的情况下使用chrome。

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