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

Question

目标

我正在使用 jQuery 制作可折叠侧边栏来制作动画。我想在侧边栏上放置垂直文本作为标签，并且可以在 animateOut/animateIn 效果上进行交换。

通常我会使用我只是垂直交换的文本图像，然后将其切换为动画，但使用 CSS3 转换我希望它可以工作。

问题

我面临的问题是，在我的旋转容器上设置高度会使其水平扩展（因为它旋转了 90 度），所以这不起作用。然后我尝试设置宽度（希望它会垂直扩展，充当高度），但这有一个奇怪的效果，导致我的父容器的宽度也扩展。

修复？

如何在不影响父容器宽度的情况下设置旋转（变换）元素的高度？到目前为止，我一直无法做到这一点。

现场示例

这是一个演示我的问题的小提琴：Fiddle

collapse-pane 类是我旋转的，包含我在其中放置文本的跨度。你会注意到它有一个宽度设置，可以加宽边框，但也会影响父容器。

代码：

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。

更新

我的问题陈述更清楚了，因为我原来的帖子混淆了这些问题。

感谢您的帮助！

Answer 1

如果您不希望旋转的 div 尺寸扩大其父尺寸，则需要将其从流程中取出。您可以为此使用绝对定位。

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

DEMO

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