我的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的显示值.menu为内联块。

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

Answer 2

.menu类适用的<a>标记是inline元素。 它们需要是block级元素才能应用转换。

通过添加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);