CSS3变换元素，但不变换其后代

Question

我有一个水平菜单，我想将它的一些标签向左或向右旋转90°。问题是transform属性也会旋转子体。看起来很难把它们放回原位，有解决方案吗？

附言:我想避免使用图像或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{ //在此处添加类-moz变换:旋转(-90deg)；-webkit-变换:旋转(-90deg)；-o-变换:旋转(-90deg)；-ms-变换:旋转(-90deg)；滤镜: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1)；变换:旋转(-90deg)；}然后，将第二条规则更改为以下一个ul为目标，而不是摆弄

• 以将其全部就位。请记住，因为第一个li是旋转的，所以需要负的margin-left

#nav_main_gts > li.rotate ul{ //在此处更改为UL -moz变换:旋转(90度)；-webkit-变换:旋转(90度)；-o-变换:旋转(90度)；-ms-变换:旋转(90度)；过滤器:webkit变换:旋转(90度)；边距-左侧：-100px；//在此处添加边距}

• 继续其他操作。

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