javascript - 使用 CSS3 变换(旋转)在 div 上设置高度

Question

目标

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

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

问题

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

修复？

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

实例

这是一个演示我的问题的 fiddle :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");
        }
    });
});