如何解决glitchy transform：rotateX 3d按钮？

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; 
 
    \t 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的边框（而不是0像素边界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; 
 
    \t 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>