Html css3鼠标悬停时边距缩小

嗯

因此，我有一个css中的“3d”按钮：悬停转换

这是html

<nav>
<ul class="hmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
</nav>

下面是JSFIDLE：

---

我的问题是，如何防止按钮在启用“悬停”时轻微向左移动？我希望他们保持他们的位置，只是“按下”而不是向左移动。

在第30行：在

ul.humenu li a:hover，ul.humenu li a:active{}

部分，删除5px的第一个实例。您应该使用以下选项：

ul.hmenu li a:hover, ul.hmenu li a:active {
    background-color: #f00;
    box-shadow: none;
    transform: translate(0, 5px);
}

---

translate（X，Y）

中的第一个数字沿X轴移动，第二个数字（Y）沿Y轴移动

替换：

转换：翻译（5px，5px）
带：
margin:5px-5px-5px-5px
通过转换，您还必须保持
li
固定的宽度和高度，以便其他按钮不受影响

演示：

确切的小提琴：
我想OP是在寻找一种新闻效果。@fizzydrink很抱歉，但这是不可能的，除非您有其他代码没有包含在JSFIDLE中。除了我改为
0
的
5px
之外，您提供的JSFIDLE链接中没有任何代码可以横向移动任何东西（这意味着从一边到另一边）。或者如果你指的是按钮以外的东西。@fizzydrink还是指红色背景？它不是横向移动，而是实际被移除。我已将其添加回，并将其设置为仅在此JSFIDLE中垂直移动。@TylerH我的意思是，我希望它像一个按钮，但是，我尝试将其横向移动。谢谢，LI的缺少大小限制。即使是%大小也可以！
ul.hmenu li a:hover, ul.hmenu li a:active {
    background-color: #f00;
    box-shadow: none;
    transform: translate(0, 5px);
}