Question

由于我是transform以及-ms-transform和-webkit-transform的新手，我无法使此代码按预期运行：

<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像素。

这里有什么问题？

Answer 1

在您正在转型的元素上设置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

Answer 2

您有两种选择。

将转换应用于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;
}

CSS3转换：Chrome解决方案

2 个答案: