爲什麼我的按鈕需要翻譯？

Question

應該發生什麼：在盤旋時按鈕會稍微增長。 會發生什麼：當鼠標懸停在右側並向右移動時，按鈕會稍微增長。

我該如何解決這個問題？

下面是代碼：

CSS

#skipButton 
{ 

    border-radius: 10em; 
    background: -moz-radial-gradient(center, Pink, Magenta); 
    background: -webkit-radial-gradient(center, Pink, Magenta); 
    background: radial-gradient(center, Pink, Magenta); 
    border: none; 
    font-family: cursive; 
    font-size: 2em; 
    left: 50%; 
    margin-right: -50%; 
    outline: none; 
    padding: .25em; 
    position: relative; 
    text-align: center; 
    -webkit-transform: translate(-50%, 0%); 
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
} 

#skipButton:hover 
{ 
    -webkit-transform: scale(1.25); 
} 

Answer 1

發生了什麼事是，你縮放和翻譯。因爲它已經設置，所以在懸停時隱式轉換回0。你需要這個：

#skipButton:hover { 
    -webkit-transform: translate(-50%, 0%) scale(1.25); 
}