Question

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

我创建了一个按钮，它只是一个蓝色的扁平矩形，带有＆＃34;了解更多＆＃34;文本。当盘旋时，我希望它在X轴上略微旋转并且底部边框稍暗，以产生轻微旋转的薄盒式按钮的错觉。我的方法确实有效，但看起来很糟糕＆＃34;毛刺＆＃34; （因为没有更好的词）。试图解释一下，边界上出现一条微小的白线，瞬间旋转并且旋转不平滑。该网站尚未生效，因此我不确定如果需要，我该如何展示。

Answer 1

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

无论哪种方式，毛躁感觉的一部分是你从没有边框属性转换到5px边框（而不是0px边框到5px边框），所以边框弹出而不是鼠标输出动画。在这种情况下，我在按钮动画之前添加了一个0px box-shadow，因此过渡更顺畅。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

如何修复毛刺变换：rotateX 3d按钮？

1 个答案: