Мой CSS3 не работает на моей странице html

Question

Im пытается использовать некоторый код 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 на встроенный блок.

Упрощенный пример: http://jsfiddle.net/vg73f/

Answer 2

В <a> тегах, которые ваш .menu класса относятся к inline являются элементами. Они должны быть block элементов уровня, чтобы применить преобразование.

При добавлении display: block; мы можем видеть, что преобразование применяется правильно.

http://jsfiddle.net/RvrBM/

В качестве альтернативы можно использовать display: inline-block;, чтобы элементы вращаться, но оставаться в расположении инлайн.

http://jsfiddle.net/g5BRT/

Кроме того, как Павел отметил в комментарии выше, вам не хватает префикса преобразования в вашем коде. Это должно выглядеть так:

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