我的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);