Geek Answers Handbook

Rotate the entire html element (whole page) 90 degrees with CSS?

I want to show every thing on a page rotated sequentially and depending on 90 degrees, I tried to do this, but the result was inaccurate, and each element rotated independently.

+4
source share
1 answer

So it was fun. Fiddle

body{
    margin:0;
    overflow:hidden;
}
.wrapper{
    transform: rotate(90deg);
    transform-origin:bottom left;
    
    position:absolute;
    top:-100vw;
    
    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>
Run codeHide result

I had to wrap the contents in a wrapper div, set the overflow of the body to hidden and move the object along its width .... but hey, it works.

If you're interested, yes, I set the height of the screen width and screen width. Makes its cleanliness clean.

+11
source

More articles:


All Articles