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

Question

Im trying to use some CSS3 code to rotate my text but I think it doesn't get recognized?

CSS code:

.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 code:

<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>

Im not sure what the problem is. I am missing something?

Answer 1

You can't transform inline elements; change the display value of .menu to inline-block instead.

Simplified example: http://jsfiddle.net/vg73f/

Answer 2

The <a> tags that your .menu class apply to are inline elements. They need to be block level elements in order for the transform to apply.

By adding display: block; we can see that a transform applies correctly.

http://jsfiddle.net/RvrBM/

Alternatively you could use display: inline-block; to allow the elements to rotate but stay in the inline arrangement.

http://jsfiddle.net/g5BRT/

Additionally, as Pavlo noted in the above comments, you are missing the unprefixed transform in your code. It should look like this:

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