定位旋转的div元素-Java 学习之路

我在定位旋转的div元素时遇到了一些困难 . 到目前为止我有：

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

这让我的div旋转得很好 . 但是，我很难将其“固定”在左侧 . （IE通常我会做一些事情：固定位置，左边0px，高度100％，宽度：无论如何） .

2 回答

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

您可以尝试将原点设置为0％0％ . 这是 Banner 的左上角，然后围绕该角旋转 . 现在旋转了 Banner ，原点已成为 Banner 的左下角 . 您可以将它固定在浏览器窗口的左侧，如下所示：

#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 */
}

编辑：
如果您希望 Banner 与旋转后的浏览器窗口高度相同，则可以使用javascript或jQuery完成 . 像这样：

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

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

回复于 2024-04-29T03:00:56+08:00

我当然希望我可以发表评论，因为我并不是100％确定我理解你所面临的问题 .

我觉得你的问题可以通过将旋转的 Banner div封装在普通 Banner 中来解决，并将容器div的位置设置为固定且左：0px . 我设置了一个小提琴，告诉你我的意思：

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

HTML：

<div class="pageContainer">
    <div class="bannerContainer">
        <div class="banner">
            &nbsp;banner
        </div>
        
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);
}

希望这可以帮助！

回复于 2024-04-29T03:00:56+08:00

定位旋转的div元素

2 回答

相关问题