在 Firefox 中使用 Rotate（无限旋转）的鼠标悬停/悬停错误

Question

我遇到这样的问题：

鼠标悬停在右侧，heree 一词所在的位置，您将无限旋转（我使用 Firefox）。

如何解决？

button{
  transition: 0.5s all;
  transform:none;
}

button:hover{
   transform:rotateY(360deg) scale(1.4);
  margin:5px;
}

<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>

附：如果我删除 margin 参数，那么它可以正常工作。但我也想要保证金！

Answer 1

我相信这是因为all 转换。

仅为transform 设置它，我想问题在这里解决了——在 Firefox 中，可能是按钮的hover 上的scaling 和margin 的组合导致了问题。

button{
  transition: 0.5s transform;
  transform:none;
}

button:hover{
   transform:rotateY(360deg) scale(1.4);
  margin:5px;
}

<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>

让我知道您对此的反馈。谢谢！

Answer 2

看起来您的button:hover + margin 正在通过0.5s 以及转换进行转换。你只需要更具体的过渡：transition: 0.5s transform;

button{
  transition: 0.5s transform;
  transform:none;
}

button:hover{
  transform:rotateY(360deg) scale(1.4);
  margin:5px;
}

<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>