Question

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

＆＃13;

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%';

＆＃13;

div {
  width : 200px;
  height : 100px;
  border : red 1px solid;
}

＆＃13;

<div id='test'>test</div>

＆＃13;

在我的真实项目中，我的问题已应用于我的div的顶部和左侧，但在摘录中您可以看到问题已应用到顶部。

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

感谢您的关注。

Answer 1

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

transform-origin: 100px 100px

CSS旋转窗外

1 个答案: