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/

Fyi，您需要使用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/