javascript - CSS 旋转窗外

Question

当我尝试使用 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 左侧和顶部对应于窗口左侧和顶部？

感谢您的关注。

Answer 1

您应设置旋转轴。这可以用 CSS 来完成。示例:

transform-origin: 100px 100px