Menu
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.
464
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.
147
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
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
