Rotating a page 90 degrees

Question

I'm working in a webpage that i want to display on a digital signage screen which has a built-in web browser. Since the screen does not have a built in "turn screen 90 degrees (portrait)" mode i have to do a workaround.

I'm trying this using the following CSS:

body{
 transform: rotate(-90deg);
 ...
}

I am using a liquid layout for this page (working in percentages) and this page is going to be displayed on a 1080x1920 screen (hanging vertically in portrait mode)

However when i display the page in my browser without rotating the screen everything seems fine.. When i rotate it, it falls out of the screen and elements don't align correctly and the page feels zoomed in instead of stretched in the browser.

Does anyone have an idea of how to fix/code this? If you need more info or code please let me know i will post it here.

If it's gonna hang in that fashion just make it 1080x1920 and it will fix itself. No need to get freaky with transform. — Rimble, Jan 23 '15 at 14:06
http://stackoverflow.com/questions/10732391/css-js-html-js-function-to-rotate-full-page Check this, rotate will differ regarding the browser you're using... (bad news ! heh) Update : this is better example : http://stackoverflow.com/questions/14233341/how-can-i-rotate-an-html-div-to-90-degrees — Julo0sS, Jan 23 '15 at 14:07
@TomKriek I would, but that would have to mean the screen should be able to put itself in portrait mode (which it can't) ;) — JJGrootveld, Jan 23 '15 at 14:19
@JJGrootveld You most certainly can. [How to in windows](http://superuser.com/questions/495631/how-do-i-rotate-windows-8-screen) Just put the screen in portrait mode and open the browser. And act like it's a normal page but longer and slimmer. — Rimble, Jan 23 '15 at 14:41
It might worth exploring the [`transform-origin`](http://www.w3schools.com/cssref/css3_pr_transform-origin.asp) property. It might be transforming it, but from the wrong point (e.g. it rotates from the top left instead of bottom right) — Daniel Apt, Jan 23 '15 at 14:52
@DanielApt I actually didnt look in to this before... great tip! however my elements are still stretching out of the browser screen... — JJGrootveld, Jan 23 '15 at 15:03

Joe Sager · Answer 1 · 2015-01-23T14:58:40.587

You need to switch the height and width values when you rotate the body, something like this:

$("body").click(function() {
var height = $(window).height();
var width = $(window).width();
if ($(this).css("transform").indexOf("-1") == -1){
    $(this).css("transform", "rotate(-90deg)");
    $(this).css("width", height + "px");
    $(this).css("height", width + "px");}
else{
    $(this).css("transform", "rotate(0deg)");
    $(this).css("width", width + "px");
    $(this).css("height", height + "px");}
});

Doing this in Fiddle positions the body so it is offset up and to the left, so you'll have to figure out how to fix that, here is my fiddle, I have also included a function to get the position of an element which might be helpful:

http://jsfiddle.net/jz0odbbz/3/

Rotating a page 90 degrees

1 Answers1