CSS3转换元素，但不转换其后代 [英] CSS3 transform an element but not its descendants

问题描述

我有一个水平菜单，我想向左或向右旋转90°的某些选项卡。
问题是transform属性也会旋转后代。
看起来很难把它们放回原位，是否有解决方案？

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?

推荐答案

你可以对后代应用反向旋转。

You could apply the reverse rotation on the descendants.

例如

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 来使其一切正常。

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

编辑

恐怕比这更复杂。 p>

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

这是真的！

例如，要解决第一个问题，您需要进行以下调整：

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

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);
 }

然后将第二条规则更改为下一个 ul 不要 li

$ c> margin ，以使其全部到位。记住，因为第一个 li 是旋转的，所以不向下，所以需要一个负的 margin-left p>

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
 }

p>

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

这篇关于CSS3转换元素，但不转换其后代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！