CSS 旋转不在窗口

CSS rotation out of window

本文关键字：窗口 旋转 CSS      更新时间：2023-09-26

当我尝试用 css 旋转div 时，div 左侧和顶部位置使我的div 不在窗口。 这是说明它的片段：

document.getElementById('test').style['-webkit-transform'] = 'rotate(90deg)';
document.getElementById('test').style['-moz-transform'] = 'rotate(90deg)';
document.getElementById('test').style['-o-transform'] = 'rotate(90deg)';
document.getElementById('test').style['-ms-transform'] = 'rotate(90deg)';
document.getElementById('test').style['transform'] = 'rotate(90deg)';
document.getElementById('test').style['zoom'] = '150%';
div {
  width : 200px;
  height : 100px;
  border : red 1px solid;
}
<div id='test'>test</div>

在我的真实项目中，我的问题被应用于我的div 的顶部和左侧，但在代码片段中，您可以看到问题应用于顶部。

另外，我需要缩放div 以对应于窗口的高度和宽度。通常我使用：window.height * 100/div.height并且可以工作，但是我怎样才能使div的左侧和顶部对应于窗口的左侧和顶部？

感谢您的关注。

您应设置旋转轴。这可以通过CSS完成。例：

transform-origin: 100px 100px
相关文章：