定位旋转的div元素

时间:2013-05-15 00:48:05

标签: html css rotation

我在定位旋转的div元素时遇到一些困难。到目前为止,我有:

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

旋转我的div就好了。但是,我很难将其“固定”到左侧。 (IE通常我会做一些事情:位置固定,左边0px,高度100%,宽度:无论如何)。

2 个答案:

答案 0 :(得分:6)

如果您的意思是希望横幅旋转并固定在浏览器窗口的左侧,则可以使用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
});

答案 1 :(得分:1)

我当然希望我可以发表评论,因为我并非100%确定我理解您所面临的问题。

我觉得你的问题可以通过将旋转的横幅div封装在正常横幅内并将容器div的位置设置为固定而左:0px来解决。我设置了一个小提琴,告诉你我的意思:

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

希望这有帮助!