Question

我有一个简单的按钮，当用户将鼠标悬停在它上面时，我希望按比例缩小10％。我试图通过使用css3＆＃34; transform：scale（1.1）;＆＃34;来实现这一点。与＆＃34;过渡：所有.3s轻松进出;＆＃34;。

它会向上缩放按钮，但也会导致文本在此过程中闪烁。我在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/

我试图找到一个解决方案，最后通过添加＆＃34; backface-visibility：hidden;＆＃34;设法在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>

按钮变换比例闪烁

1 个答案: