Set height on div with CSS3 transform (rotate)

Question

purpose

I am working on a collapsible sidebar using jQuery for animation. I would like to have vertical text in the sidebar that acts as a label and can change the effect of animateOut / animateIn.

Normally I would use a text image that I just swapped vertically and switch it to animation, but with CSS3 transforms I would like to make it work.

Problem

The problem I am facing is that setting the height on my rotated container makes it expand horizontally (rotate it 90 degrees) so that it doesn't work. Then I tried to set the width (hoping that it would expand vertically, acting like height), but this has an odd effect, as a result of which the width of my parent container also expands.

Fix?

How to set height on a rotated (transformed) element without affecting the width of the parent container? So far I have not been able to do this.

Living example

Here is a script demonstrating my problem: Fiddle

The class collapse-paneis what I rotated and contains a space. I have text inside. You will notice that it has a width that extends the border, but also affects the parent container.

The code:

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

, divs , . .

, "expand", transform orign top/right.

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