#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});总结
以上是内存溢出为你收集整理的html – 定位旋转的div元素全部内容,希望文章能够帮你解决html – 定位旋转的div元素所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)