html - 我的 CSS3 在我的 html 页面中不起作用

Question

我试图使用一些 CSS3 代码来旋转我的文本，但我认为它没有被识别？

CSS 代码：

.menu {
    background-image:url('button.jpg');
    cursor: pointer;
    width: 61px;
    height: 205px;

    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
}

HTML 代码：

<div id="menu-box">
    <a class="menu" href="#" >HOME</a>
    <a class="menu" href="#" >MYSELF</a>
    <a class="menu" href="#" >PORTFOLIO</a>
    <a class="menu" href="#" >CONTACT ME</a>        
</div>

我不确定问题是什么。我错过了什么？

Answer 1

您不能转换内联元素；改为将显示值更改.menu为 inline-block。

简化示例：http: //jsfiddle.net/vg73f/

Answer 2

您的类适用的<a>标签是元素。它们必须是关卡元素才能应用转换。.menuinlineblock

通过添加display: block;，我们可以看到转换正确应用。

http://jsfiddle.net/RvrBM/

或者，您可以使用display: inline-block;允许元素旋转但保持内联排列。

http://jsfiddle.net/g5BRT/

此外，正如 Pavlo 在上述评论中指出的那样，您在代码中缺少无前缀转换。它应该如下所示：

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);