CSS3变换：镀铬溶液

由于我是新来transform和-ms-transform和-webkit-transform，我不能让这段代码按预期方式工作：CSS3变换：镀铬溶液

<nav> 
    <ul> 
     <li><a target="_parent" href="index.php" class="button">Home</a></li> 
     <li><a target="_parent" href="about.html" class="button">About</a></li> 
     <li><a target="_parent" href="login/reg.php" class="button">Register</a></li> 
     <li><a target="_parent" href="private/" class="button">Member</a></li> 
     <li><a target="_parent" href="chat.php" class="button">Chat</a></li> 
     <li><a target="_parent" href="http://yo.hostei.com" class="button">URL Shortener</a></li> 
     <li><a target="_parent" href="http://sql17.000webhost.com/phpMyAdmin/index.php?db=a7593238_data" class="button">Admin</a></li> 
    </ul> 
</nav> 
<style> 
    nav { 
     text-align:center; 
     width:100%; 
    } 
    ul li { 
     list-style:none; 
     text-align:center; 
     display:inline-block; 
    } 
    .button { 
     text-decoration:none; 
     color:#000000; 
     padding:10px 20px; 
     text-align:center; 
    } 
    .button:hover { 
     -ms-transform:translateY(10px); 
     -webkit-transform:translateY(10px); 
     transform:translateY(10px); 
     background-color:#cccccc; 
    } 
</style>

所以，当我将鼠标移动到它的<a class="button">元素应该转换自己下降10个像素。

这里有什么问题？

来源

2014-04-28 Jamie

尝试应用该变换到'li' - HTTP：//的jsfiddle。 net/Ru4wR/ –

好。请发表您的评论作为答案，以便我可以接受它，为stackoverflow社区做出贡献。如果可以，请给出一些解释。 – Jamie

看到这个讨论：http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements – fcalderan

你有两个选择。

应用转换到li或添加display:block到锚

JSfiddle with 2nd option

CSS

nav { 
    text-align:center; 
    width:100%; 
} 
ul li { 
    list-style:none; 
    text-align:center; 
    display:inline-block; 
} 
.button { 
    text-decoration:none; 
    color:#000000; 
    padding:10px 20px; 
    text-align:center; 
    display: block; 
} 
.button:hover { 
    -ms-transform:translateY(10px); 
    -webkit-transform:translateY(10px); 
    transform:translateY(10px); 
    background-color:#cccccc; 
}

来源

2014-04-28 11:49:55

设置display:block您所转换的元素：

.button { 
    display: block; /* transform needs a display value other than inline */ 
    text-decoration:none; 
    color:#000000; 
    padding:10px 20px; 
    text-align:center; 
}

DEMO

来源

2014-04-28 11:49:10

这很清楚，但我不应该接受这个答案，因为'@Paulie_D给出解决方案第一，接受转换评论回答，从而提供了一个额外的方法。“＃ – Jamie

技术上你有两个以上的选择。请注意，问题的症结在于，你试图将'transform'应用于'inline'元素，这将无法工作。你需要'display：block'或'display：inline-block'来让变换具有任何视觉效果。有[其他'显示'值]（http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements），这将工作以及取决于您的需要。 –

CSS3变换：镀铬溶液

回答

相关问题