定位旋转的div元素

Question

我在定位一个旋转的 div 元素时遇到了些困难。目前我已经实现了以下内容:

#side-banner {
transform: rotate(270deg); }

我的div旋转得很好。 但是，我在将其固定到左侧方面遇到了麻烦（通常情况下，我会使用以下方式：position fixed，left 0px，height 100％，width：任意）。

- Michael Schmidt

---

对我来说，它似乎工作正常：http://jsfiddle.net/frUzM/ - npage

在Firefox中将位置固定为"fixed"并设置左侧距离为0像素会使其处于屏幕的2/3位置。 - Michael Schmidt

Answer 1

如果您想要旋转横幅并固定在浏览器窗口的左侧，您可以使用 transform-origin 属性。默认情况下，它设置为50％50％。这是元素的宽度和高度的50％（元素的中心）。

您可以尝试将原点设置为0％0％。那是横幅的左上角，然后围绕该角旋转。现在，随着横幅的旋转，原点已成为横幅的左下角。您可以像这样将其固定在浏览器窗口的左侧：

#side-banner {
    poition:fixed;
    left:0;
    top:50%;
    width:300px; /* after rotation this is the height */
    margin-top:150px; /* is 50% of width */
    transform: rotate(270deg);
    transform-origin:0% 0%; /* set to the upper-left corner */
    -ms-transform: rotate(270deg); /* IE 9 */
    -ms-transform-origin:0% 0%; /* IE 9 */
    -webkit-transform: rotate(270deg); /* Safari and Chrome */
    -webkit-transform-origin:0% 0%; /* Safari and Chrome */
}

编辑：
如果您希望在旋转后横幅与浏览器窗口具有相同的高度，可以使用 JavaScript 或 jQuery 完成。如下所示：

var width = $(window).height();
var marginTop = Math.round(width / 2);

$('#side-banner').css({
    'width': width,
    'margin-top': marginTop
});

- cumul

Answer 2

我希望我可以留下评论，因为我不确定我完全理解你所面临的问题。

我认为您的问题可以通过将旋转的横幅div封装在普通div中，并将容器div的位置设置为fixed和left:0px来解决。我设置了一个fiddle来展示我的想法：

http://jsfiddle.net/q7qgn/1/

HTML：

    <div class="pageContainer">
    <div class="bannerContainer">
        <div class="banner">
            &nbsp;banner
        </div>
        <br/>bannerContainer
    </div>
</div>

CSS：

 .pageContainer{
margin: 0px;
background-color: grey;
width: 400px;
height: 400px;
}

.bannerContainer{
background-color: green;
width: 100px;
height:200px;
position: fixed;
left: 0px;
}

.banner{
background-color: red;
width: 100px;
height: 100px;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
}

希望这有所帮助！

- Sheriff_McLawDog