如何解決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>