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

Question

我遇到这样的问题：

鼠标悬停在右侧，单词heree就在那里，您将获得无尽的旋转（我使用Firefox）。

如何解决这个问题？

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

我认为这是因为all过渡。

仅针对transform进行设置，我猜这个问题已经解决了 - 在Firefox中可能会导致按钮scaling上margin和hover的组合这个问题。

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>