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

Question

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 independent

Answer 1

So that was fun. 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;
}

    

        test

        

        

        

        
ing
    

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.