当前位置：文江博客话题详情

CSS3 转换元素但不转换其后代

发布于 2024-12-05 15:59:55 字数 105 浏览 1 评论 0原文

我有一个水平菜单，我想将其某些选项卡向左或向右旋转 90°。问题是变换属性也会旋转后代。看起来很难恢复原状，有什么办法吗？

PS 我想避免使用图像或 JS，它们可以作为后备。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦途 2024-12-12 15:59:55

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

例如

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。

例如，要修复第一个，您需要进行以下调整：

向第一个li添加一个类
<前><代码>#nav_main_gts> li.rotate{ //在这里添加类
-moz变换：旋转（-90度）；
-webkit-transform：旋转（-90度）；
-o-变换：旋转（-90度）；
-ms-变换：旋转（-90度）；
过滤器：progid：DXImageTransform.Microsoft.BasicImage（旋转= -1）；
变换：旋转（-90度）；
}
然后更改第二个规则以定位下一个 ul 而不是 li
然后摆弄 margin 以获取全部内容到位。记住，因为第一个li是旋转的，向下不是向左，所以需要一个负的margin-left
<前><代码>#nav_main_gts> li.rotate ul{ //此处更改为 UL
-moz变换：旋转（90度）；
-webkit变换：旋转（90度）；
-o-变换：旋转（90度）；
-ms-变换：旋转（90度）；
过滤器：progid：DXImageTransform.Microsoft.BasicImage（旋转= 1）；
变换：旋转（90度）；
左边距：-100px； //在这里添加边距
}
继续其他。

更新示例： http://jsfiddle.net/FKCTk/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
 }