Question

所以，这是我的CSS：

img.buttonImg {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out; 
  -o-transition: all 0.5s ease-in-out; 
  -ms-transition: all 0.5s ease-in-out; 
  transition: all 0.5s ease-in-out; 
}

img.buttonImg:hover { 
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
  transform: rotate(360deg); 
}

然而，似乎没有动画，FireFox上的图像根本没有旋转，但在其他浏览器上却没有。

Answer 1

这是您的问题 - 由this example演示。

当将鼠标悬停在img元素上时，转换不起作用，因为它位于button元素内。我认为这是一个渲染问题，因为仅似乎是 FF 的情况。它在Chrome和其他现代浏览器中运行良好。

至于解决方案，从img中移除button元素显然可以解决问题。

或者，您可以在将鼠标悬停在button而不是子img元素上时添加旋转过渡效果。 Updated example - 它适用于FF。

button.t:hover img { 
    transform: rotate(360deg);
   /* other vendors.. */
}

两种解决方案都有效;但是，我甚至不知道在img元素中是否有button元素是否有效。这可能是渲染错误的原因;如果它甚至是一个错误。

FireFox转换和转换无法正常工作

1 个答案: