CSS3 transform an element but not its descendants

问题

I have an horizontal menu and I want to rotate 90° left or right some of its tabs. Problem is that the transform property also rotates descendants. It looks difficult to put them back in place, is there a solution?

P.S. I want to avoid using images or JS, they are ok as fallbacks.

回答1:

You could apply the reverse rotation on the descendants.

For example

div.parent{
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
}


div.parent span{
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);  
}

Example: http://jsfiddle.net/RpcfB/1/

Fyi, you will need to play with padding and/or margin to make it all work.

EDIT

I'm afraid it's more complicated than that.

That's the truth!! Although, I as mentioned, you have to play with the css.

For example, to fix the first one, you need to make these adjustments:

add a class to the first li

 #nav_main_gts > li.rotate{ //ADD CLASS HERE
     -moz-transform: rotate(-90deg);
     -webkit-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1);
     transform: rotate(-90deg);
 }

Then change the second rule to target the next ul not li

Then fiddle with the margin to get it all in place. Remember, because the first li is rotated, down is not left, so a negative margin-left is needed

 #nav_main_gts > li.rotate ul{ //CHANGE TO UL HERE
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    transform: rotate(90deg);
    margin-left:-100px;  //ADD A MARGIN HERE
 }

continue with the others.

Updated example: http://jsfiddle.net/FKCTk/1/

来源：https://stackoverflow.com/questions/7514200/css3-transform-an-element-but-not-its-descendants

标签

css

css3