鼠標懸停/懸停時css3邊距縮小

Question

好，

所以我在CSS中有一個：3over轉換的“ 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>

這是CSS

ul.hmenu {
margin-top: 9%;
z-index: 50;
width: 75%;
list-style: none;
}

ul.hmenu li {
float: left;
margin-left: 5%;
}

ul.hmenu li a:before {
content: "\2022\00a0";
color: #f00;
transition: color 1s ease;
}

ul.hmenu li a {
background: #333;
color: #fff;
display: block;
font: normal 100 1.5em Helvetica, sans;
padding: .5em;
box-shadow: 5px 5px 0 0 #f00;
transition: background-color 1s ease;
text-decoration: none;    
}

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

ul.hmenu li a:hover:before, ul.hmenu li a:active:before {
color: #fff;
content: "\203A\00a0";  
}

這是JSFIDDLE： http : //jsfiddle.net/etb6F/

我的問題是，在：hover上時，如何防止按鈕稍微向左移動？ 我希望他們保持立場，只是“壓低”而不能向左移動。

Answer 1

使用轉換時，還必須保持li固定的寬度和高度，以便不影響其他按鈕。

演示： http : //jsfiddle.net/etb6F/3/

確切的提琴： http : //jsfiddle.net/etb6F/4/

Answer 2

在第30行上：在ul.hmenu li a:hover, ul.hmenu 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軸移動。

Answer 3

替換： transform: translate(5px, 5px); 帶有： margin:5px -5px -5px 5px;