用CSS将所有html元素（整个页面）旋转90度？答案

【问题标题】：Rotate all html element (whole page) 90 degree with CSS?用CSS将所有html元素（整个页面）旋转90度？
【发布时间】：2016-03-07 23:12:52
【问题描述】：

我想显示页面中的所有内容都一致且独立地旋转 90 度，我尝试这样做，但结果不准确，每个元素都独立旋转。

【问题讨论】：

body {transform: rotate(90deg);}
不是这么简单的@DmitriyLoskutov
@DmitriyLoskutov 我认为他的问题可能出在选择器上，因为用它点击* 会独立旋转所有内容。
是的，* {transform:rotate(90deg)} 会很乱，真正的想法是什么？从横向切换到纵向布局？
伙计们只是想像我需要的东西是（Ctrl + Alt + 向左箭头）

标签： html css rotation htmlelements

【解决方案1】：

所以这很有趣。 Fiddle

body{
    margin:0;
    overflow:hidden;
}
.wrapper{
    transform: rotate(90deg);
    transform-origin:bottom left;
    
    position:absolute;
    top: -100vw;
    left: 0;
    
    height:100vw;
    width:100vh;
    
    background-color:#000;
    color:#fff;

    overflow:auto;
}

<body>
    <div class='wrapper'>
        test<br />
        <hr />
        <div><hr /></div>
        <div><div><hr /></div></div>
        <div>ing</div>
    </div>
</body>

必须将内容包装在包装器 div 中，将 body overflow 设置为隐藏，然后将内容向上滑动宽度......但是，嘿，它可以工作。

如果你很好奇，是的，我确实将高度设置为屏幕宽度，宽度设置为屏幕高度。使其干净利落地扩展自己。

【讨论】：

只是一个警告@Hussein，请务必在所有目标 iOS Safari 版本上进行测试。 caniuse 报告了 iOS、旧版 IE 甚至 Chrome 中的许多已知问题。 Firefox 是目前唯一没有错误的（射击）
如果包装器中的东西具有 vh/vw 高度/宽度，这似乎无法正常工作。我想知道是否有办法避免不得不到处转置这些......
@Michael 你只需要改变你对 vh/vw 的使用。这不会重新定义视口，它只会翻转它渲染的所有东西。所以 vh 是你的有效 vw，而 vw 是你的有效 vh。
@abluejelly 对，这就是我要说的，在某些情况下，必须将它们到处转置（这就是你的建议）是行不通的。
@Michael 如果样式是嵌入的而不是链接的，您可以使用 js 轻松完成 (dabblet)。 Shadow DOM 可能也有一些 BS，但我还不精通 Shadow DOM。

【解决方案2】：

writing-mode: vertical-rl; 也执行 90 度的旋转并且可以应用于身体。

body {
  margin: 0;
  overflow: hidden;
  transform-origin: right;
  transform: translate(-100vw, 0) rotate(180deg);
  writing-mode: vertical-rl;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget vestibulum lectus, eget sollicitudin quam. Etiam tempus mollis orci, et fermentum enim maximus sed.
<br/>
<hr/>

https://jsfiddle.net/f2hmwgkz

【讨论】：