html怎么将旋转定位在中心,html – 定位旋转的div元素

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

});