目标
我正在使用jQuery进行动画制作可折叠的侧边栏。我希望在侧边栏上有垂直文本作为标签,并且可以在animateOut / animateIn效果中进行交换。
通常,我会使用图像来代替我已经垂直交换的文本,并在动画时切换它,但是使用CSS3变换,我想让它起作用。
问题
我面临的问题是,在旋转容器上设置高度会使其水平扩展(因为它旋转了90度),因此无法工作。然后我尝试设置宽度(希望它会垂直扩展,作为高度),但这会导致父容器的宽度也扩展。
解决方法?
如何在不影响父容器宽度的情况下设置旋转(转换)元素的高度?到目前为止,我一直无法做到这一点。
实时示例
这里是演示我的问题的fiddle:Fiddle
collapse-pane
类是我旋转并包含我文本的span。您将注意到它有一个设置的宽度,它会扩大边框,但也会影响父容器。
代码:
CSS:
.right-panel{
position:fixed;
right:0;
top:0;
bottom:0;
border:1px solid #ccc;
background-color:#efefef;
}
.collapse-pane{
margin-top:50px;
width:30px;
border:1px solid #999;
cursor:pointer;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.collapse-pane span{
padding:5px;
}
HTML
<div class="right-panel">
<div class="collapse-pane">
<span class="expand">Expand</span>
</div>
<div style="width:0;" class="panel-body">
<div style="display:none;" class="panel-body-inner">
adsfasdfasdf
</div>
</div>
</div>
这里有一张图片展示了问题,因此您不需要查看Fiddle。
更新
我已经更清晰地陈述了问题,因为我的原帖子混淆了问题。
感谢任何帮助!