css - 为什么我的按钮在我想要缩放时会平移？

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