CODEWITHSUNDEEP
htmlcssrotationhtmlelements
Hussein
Hussein

Reputation: 681

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

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.

Upvotes: 23

Views: 43110

Answers (3)

akaspick
akaspick

Reputation: 1697

What's your use case? If you're printing, you can use the page-orientation* descriptor to easily rotate everything:

@page rotated {
  page-orientation: rotate-left;
  size: landscape;
}

@media print {
  body {
    page: rotated;
  }
}

* Doesn't appear to be supported by Safari yet.

Upvotes: 0

Friedrich -- Слава Україні
Friedrich -- Слава Україні

Reputation: 3734

writing-mode: vertical-rl; also performs a rotation by 90 deg and could be applied to 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

Upvotes: 5

abluejelly
abluejelly

Reputation: 1306

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.

Upvotes: 45

Related Questions