用CSS3变换设置div的高度(旋转)

Question

目标

我正在使用jQuery动画制作可折叠的侧边栏.我希望侧边栏上有垂直文本作为标签,可以交换animateOut/animateIn效果.

通常情况下,我会使用我只是垂直交换的文本图像,并在动画中将其切换出来,但是对于CSS3转换,我想让它工作.

问题

我面临的问题是,在旋转的容器上设置高度使其水平扩展(因为它旋转了90度),这样就不起作用了.然后我尝试设置宽度(希望它会垂直扩展,充当高度),但这会产生奇怪的效果,导致我父容器的宽度也会扩展.

固定？

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

实例

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

这个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>

这是一个也显示问题的图像,因此您不必查看小提琴.

更新

我已经使问题陈述更加清晰,因为我的原始帖子使问题混乱.

谢谢你的帮助!

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