CSS3转换一个元素，但不是其后代

Question

我有一个水平菜单，我想向左或向右旋转90°的一些标签。 问题是transform属性也会旋转后代。 看起来很难把它们放回原处，有没有解决办法？

P.S.我想避免使用图像或JS，他们可以作为后备。

Answer 1

您可以对后代应用反转。

例如

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


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

例子：http://jsfiddle.net/RpcfB/1/

据透露，需要与padding和/或margin发挥，使这一切工作。

编辑

恐怕比这更复杂。

这就是事实！虽然，我提到，你必须玩css。

例如，为了解决第一个，你需要做这些调整：

1. 一类添加到第一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); 
   } 
   

2. 然后更改第二个规则为目标的接下来ul不是li

3. 然后拨弄margin把它全部到位。请记住，因为第一li旋转，上下不剩，所以需要一个负margin-left

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

4. 继续与其他人。

更新例如：http://jsfiddle.net/FKCTk/1/