html – 定位旋转的div元素

发布时间：2020-12-14 16:38:46 所属栏目：资源来源：网络整理

导读：我在定位旋转的div元素时遇到了一些困难.到目前为止我有： #side-banner {transform: rotate(270deg); } 这让我的div旋转得很好.但是,我很难将其“固定”在左侧. (IE通常我会做一些事情：固定位置,左边0px,高度100％,宽度：无论如何). 解决方法如果您希望旋

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

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

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

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!