21

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.

Hussein
  • 653
  • 3
  • 10
  • 28

2 Answers2

41

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.

abluejelly
  • 1,266
  • 9
  • 17
  • 1
    Just a warning @Hussein, be sure to test on all target iOS Safari versions. [caniuse](http://caniuse.com/#feat=viewport-units) reports a number of known issues on iOS, older IE, and even in Chrome. Firefox is the only one bug-free on it currently (shots fired) – abluejelly Mar 08 '16 at 00:11
  • this does not seem to work properly if stuff in the wrapper has vh/vw heights/widths. i wonder if there is a way to avoid having to transpose these everywhere... – Michael Feb 15 '17 at 23:57
  • @Michael You just have to flip your use of vh/vw. This doesn't redefine the viewport, it merely flips everything it rendered turnways. So vh is your effective vw, and vw your effective vh. – abluejelly Apr 06 '17 at 15:33
  • @abluejelly right, that's what i'm saying, having to transpose these everywhere (which is what you are suggesting) is a non-starter in some cases. – Michael Apr 06 '17 at 19:10
  • @Michael if the style is embedded instead of linked, you can do it with js real easy ([dabblet](http://dabblet.com/gist/0b2d41ab8b6205fe5f0b8d4f1cbb9a00)). Shadow DOM might also have some BS for it, but I'm not versed in Shadow DOM yet. – abluejelly Apr 06 '17 at 20:12
  • Also honestly not sure what the original use case of this even was, given that pretty much every device which has a tablet-like interface has *native* support for doing this when it's appropriate. I really only answered the question because it was a fun exercise. – abluejelly Apr 06 '17 at 20:15
  • @abluejelly what if we were to do it counterclockwise? Any suggestions please? – Waterfr Villa Aug 17 '18 at 02:56
  • @WaterfrVilla origin of `bottom right`, rotation of `270deg`, and add a `right: 0;` so as to fix the horizontal. Adjusting answer to make it easier to come to that conclusion. – abluejelly Aug 17 '18 at 17:14
  • Seems scroll won't work on touch devices https://jsfiddle.net/sa0ezLkw/1/ – Vincente Jul 06 '21 at 16:45
  • Just to clarify on top of what @abluejelly said: I removed `left:0;` and added `right:0;` instead. Alternatively, you can do: `right:0; left:auto;` to override it. – Aidan Hakimian Jul 21 '21 at 21:33
3

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

Friedrich -- Слава Україні
  • 2,901
  • 1
  • 21
  • 40