用CSS将所有html元素(整个页面)旋转90度?

沃梦达教程前端问题

2022-01-01

Rotate all html element (whole page) 90 degree with CSS?(用CSS将所有html元素(整个页面)旋转90度?)

本文介绍了用CSS将所有html元素(整个页面)旋转90度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I want to display every thing in the page rotated consistently and dependently 90 degree, I tried to do it but the result was inaccurate and each element rotated independently.

推荐答案

这很有趣.小提琴

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 设置为隐藏，然后将内容向上滑动宽度......但是，嘿，它可以工作.

Had to wrap the content in a wrapper div, set body overflow to hidden, and slide the thing up by its width.... but hey, it works.

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

If you're curious, yes, I did set height to screen-width and width to screen-height. Makes it scale itself cleanly.

这篇关于用CSS将所有html元素(整个页面)旋转90度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：用CSS将所有html元素(整个页面)旋转90度?