我在定位旋转的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 });
原文地址:https://www.jb51.cc/html/227227.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。