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

时间:2017-04-13 18:02:39

标签: css google-chrome animation css-transforms

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

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

基本上我正在尝试从

创建关键帧
transform: rotateX(-72deg) translateZ(20px);

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

Fiddler

1 个答案:

答案 0 :(得分:-1)

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

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