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

html css rotation htmlelements
Hussein picture Hussein · Mar 8, 2016 · Viewed 25k times · Source

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.

Answer

abluejelly picture abluejelly · Mar 8, 2016

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;
}
<body>
    <div class='wrapper'>
        test<br />
        <hr />
        <div><hr /></div>
        <div><div><hr /></div></div>
        <div>ing</div>
    </div>
</body>

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.

Related questions

Positions fixed doesn't work when using -webkit-transform

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols down with the user. In Firefox it works fine, but in webkit based browsers it's broken. After using the -webkit-transform, …

Read More
90 degrees rotated text, flush to page top-right with CSS

I know how to rotate text 90 degrees using CSS, but I'm trying to align the text to the top-right of the page (or a parent element) as its 90-degree-rotated self. Is this possible? Example:

Read More
Rotate Text as Headers in a table (cross browser)

This is not a question. I just felt that after spending this much time figuring out how to do this I would hate myself if i didn't save it somewhere and I would be a lousy programmer if I didn't …

Read More