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

Question

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

Answer 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 设置为隐藏，然后将内容向上滑动宽度....但是，嘿，它有效。

如果您好奇的话，是的，我确实将高度设置为屏幕宽度，将宽度设置为屏幕高度。使它能够干净利落地自我缩放。

Answer 2

writing-mode: vertical-rl; 也执行 90 度的旋转，可以应用于 body。

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

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

Rotate all html element (whole page) 90 degree with CSS?

html

css

rotation

htmlelements