css - 如何修复故障转换 :rotateX 3d button?

Question

#learn-more-button {
  position: relative;
  top: 69%;
  margin: 0 auto;
  padding-top: 18px;
  width: 185px;
  height: 38px;
  background-color: #009ee3;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: #fff;
  font-weight: 400;
  text-align: center;
  letter-spacing: 2px;
  transition: 0.85s;
}
#learn-more-button:hover {
  /*box-sizing: border-box;
    	border-bottom: 5px solid #c42c50;*/
  -webkit-transform: rotateX(25deg);
  transform: rotateX(25deg);
  cursor: pointer;
  border-bottom: 5px solid #0091c8;
}

<div id="learn-more-button">Button</div>

我创建了一个按钮，它只是一个带有“了解更多”文本的蓝色扁平矩形。悬停时，我希望它在 X 轴上稍微旋转，底部边框稍微暗一些，以创建细框样式按钮稍微旋转的错觉。我的方法确实有效，但是它看起来很“故障”(因为缺少更好的词)。尝试解释一下，边框上会瞬间出现一条细小的白线，并且旋转不平滑。该网站尚未上线，所以我不确定如何在需要时显示它。

Answer 1

使用实心 box-shadow 会比 border 更优雅地过渡。

无论哪种方式，部分故障感觉是您正在从无边框属性过渡到 5px 边框(而不是 0px 边框到 5px 边框)，因此边框突然消失而不是在鼠标移出时设置动画。在这种情况下，我在按钮设置动画之前向按钮添加了一个 0px 的 box-shadow，因此过渡更平滑。

#learn-more-button {
  position: relative;
  top: 69%;
  margin: 0 auto;
  padding-top: 18px;
  width: 185px;
  height: 38px;
  background-color: #009ee3;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: #fff;
  font-weight: 400;
  text-align: center;
  letter-spacing: 2px;
  transition: 0.85s;
  box-shadow: #0091c8 0 0 0;
}
#learn-more-button:hover {
  /*box-sizing: border-box;
    	border-bottom: 5px solid #c42c50;*/
  -webkit-transform: rotateX(25deg);
  transform: rotateX(25deg);
  cursor: pointer;
  box-shadow: #0091c8 0 5px 0;
}

<div id="learn-more-button">Button</div>