按钮变换刻度闪烁

Question

我有一个简单的按钮，当用户将鼠标悬停在它上面时，我想将其放大 10%。 我试图通过使用 css3 "transform: scale(1.1);" 来实现这一点连同“transition: all .3s ease-in-out;”。

它会放大按钮，但也会导致文本在此过程中闪烁。我在 Chrome、FF 和 IE 中对其进行了测试 - 都遇到了同样的问题。

CSS：

a {
    display: inline-block;
    padding: 30px;
    margin-top: 10%;
    margin-left: 15%;
    font-size: 20px;
    color: #fff;
    background-color: #000;
    text-decoration: none;
    transition: all .3s ease-in-out;
}

a:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

示例：https://jsfiddle.net/Lfwnejkc/1/

我试图找到一个解决方案，最后设法通过添加“backface-visibility: hidden;”在 Chrome 中修复它到按钮。文字现在有点模糊，但没关系。不幸的是，对于 FF 和 IE，这不起作用，并且按钮内的文本在放大时仍然闪烁。

a {
    display: inline-block;
    padding: 30px;
    margin-top: 10%;
    margin-left: 15%;
    font-size: 20px;
    color: #fff;
    background-color: #000;
    text-decoration: none;
    transition: all .3s ease-in-out;
    backface-visibility: hidden;
}

a:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

示例：https://jsfiddle.net/Lfwnejkc/2/

我昨天花了半天时间在谷歌上搜索并试图修复它。不幸的是，到目前为止我还没有成功。

有没有人遇到过这样的问题，最好的解决方法是什么？

Answer 1

不完美，但更好的是，在z平面中移动元素，并通过透视获得缩放效果

a {
  display: inline-block;
  padding: 30px;
  margin-top: 10%;
  margin-left: 15%;
  font-size: 20px;
  color: #fff;
  background-color: #000;
  text-decoration: none;
  transition: all 1s ease-in-out;
  transform:  perspective(1000px) translateZ(0px);
}

a:hover {
  transform:  perspective(1000px) translateZ(300px);
}

<a href="#">BUTTON</a>