用CSS3变换设置div的高度（旋转） [英] Set height on div with CSS3 transform (rotate)

问题描述

目标

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

通常情况下，我会使用垂直交换的文本图像，并将其切换为动画，但使用CSS3转换我希望获得它而不是工作。

问题

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

解决吗？

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

b
现场示例

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

CSS：

 右面板{
位置：固定; 
 right：0; 
 top：0; 
 bottom：0; 
 border：1px solid #ccc; 
 background-color：#efefef; 
} 
 .collapse-pane {
 position：absolute; 
 border：1px solid＃999; 
光标：指针; 
 top：20％; 
正确：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（）{$ b $ if 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（{
宽度：00 
}，400）; 
 $（。panel-body-inner）。fadeOut（300）; 
 $（。collapse-pane span）。html 展开）; 
} 
}）; 
}）; 
  

Goal

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

Normally I would use an image of the text that I've simply swapped vertically, and switch it out on animation, but with CSS3 transforms I'd like to get it to work instead.

Problem

The problem I'm facing is that setting the height on my rotated container makes it expand horizontally (as it's rotated 90deg) so that doesn't work. I then tried to set the width (hoping it would expand vertically, acting as height), but that has an odd effect of causing the width of my parent container to expand as well.

Fix?

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

Live Example

Here's a fiddle that demonstrates my problem: Fiddle

The collapse-pane class is what I have rotated and contains the span I have my text inside. You'll notice it has a width set, that widens 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>

Here's an image also showing the problem, so you don't have to view the Fiddle.

Update

I've made the problem statement a little clearer, as my original post was confusing the issues.

Thanks for any help!

解决方案

If you don't want the rotated divs size expand it's parent size, you need to take it out of the flow. You may use absolute positioning for this.

The following demo uses this technique and also positions the "expand" element by setting a transform orign and top/right values.

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

这篇关于用CSS3变换设置div的高度（旋转）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！