使用CSS3 transform（旋转）在div上设置高度

Question

目标

我正在使用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。

更新

我已经更清晰地陈述了问题，因为我的原帖子混淆了问题。

感谢任何帮助！

- Blunderfest

---

已更新，包括代码。 - Blunderfest

JS对于这个问题并不重要。我如何在旋转的容器中添加高度，而不影响父容器？将显示设置为内联块似乎没有帮助。 - Blunderfest

@malcoda，你仍然将旋转应用于折叠面板类而不是实际的span元素。 - Mathias Rechtzigel

@Malcoda，虽然你的问题描述得很好，但我还是有点难以理解所需的布局。看一下这个 fiddle 并告诉我这是否是你想要的：http://jsfiddle.net/webtiki/8mnRF/17/ - web-tiki

@web-tiki 我很好奇为什么设置内部 span 的宽度会影响其父元素的宽度（因为它被旋转了）。我想知道如何设置 span 的宽度而不影响包含它的 div。你提供的解决方案可以用，但不完全符合我的要求。谢谢！ - Blunderfest

Answer 1

如果您不希望旋转的 div 扩展其父级大小，您需要将其移出流程。您可以使用绝对定位来实现此目的。

以下演示使用了这种技术，并通过设置变换原点和顶部/右侧值来定位“扩展”元素。

演示

CSS：

.right-panel {
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    border:1px solid #ccc;
    background-color:#efefef;
}
.collapse-pane {
    position:absolute;
    border:1px solid #999;
    cursor:pointer;
    top:20%;
    right:100%;
    -ms-transform-origin:100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    /* 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;
}

jQuery :

$(document).ready(function () {
    var height = $(".right-panel").height();
    $('.collapse-pane').click(function () {
        if ($(".collapse-pane span").html() == "Expand") {
            $(".panel-body").animate({
                width: 200
            }, 400);
            $(".panel-body-inner").fadeIn(500);
            $(".collapse-pane span").html("Collapse");
        } else {
            $(".panel-body").animate({
                width: 00
            }, 400);
            $(".panel-body-inner").fadeOut(300);
            $(".collapse-pane span").html("Expand");
        }
    });
});

- web-tiki

---

感谢您耐心阅读我的冗长帖子。好答案！ - Blunderfest