How do I rotate the whole web page 90, 180 or 270 degrees?

Question

I want to rotate the whole web page 90, 180 or 280 degrees.

Solution how to rotate 90 degrees is given in answer Rotate all html element (whole page) 90 degree with CSS? . If I change 90 degrees to 270 degrees web page rotates "out of the screen" or is not centered to the screen. I would like to rotate the page like I rotate my monitor. My page starts from top left.

How to edit this code to properly work with 180 and 270 degrees?

.wrapper{
    transform: rotate(90deg);
    transform-origin:bottom left;

    position:absolute;
    top:-100vw;

    height:100vw;
    width:100vh;

    background-color:#000;
    color:#fff;

    overflow:auto;
}

if you dont change the transform-origin does it work like you want? — Ekim, Dec 07 '17 at 15:12
You have in your CSS six lines, think why there are there. Note: changing background/color has no effect. — pavel, Dec 07 '17 at 15:13

score 2 · Answer 1 · answered Dec 07 '17 at 15:24

transform-origin is the CSS property responsible for this. It determins the point the element is rotated around of. If you change the transform-origin and rotate the element, the position of the element can change depending on what value you use. You can change the value of transform-origin to the result you need.

Here's an example of two different transform-origins (hover on them):

.wrapper {
  margin-left: 50px;
  color: white;
  transform-origin: bottom left;
  height: 100px;
  width: 100px;
  background-color: #000;
  color: #fff;
  overflow: auto;
  padding: 10px;
}

.wrapper:hover {
  transition-duration: 0.3s;
  transform: rotate(90deg);
}

.spacerM {
  display: block;
  width: 100%;
  clear: both;
  height: 30px;
}

.correct {
  transform-origin: center;
  background: red;
}

<div class="wrapper">Transform-Origin Bottom Left</div>
<div class="spacerM"></div>
<div class="wrapper correct">Transform-Origin Center</div>

score 1 · Answer 2 · answered Dec 20 '17 at 15:44

Expanding on the answer mentioned above, I was able to get 90, 180, and 270 degree page rotation working with the following styles. transform-origin and top are needed for 90 and 270 but not for 180.

// 90 degrees
.wrapper {
  transform: rotate(90deg);
  transform-origin: bottom left;
  top: -100vw;
  height: 100vw;
  width: 100vh;
  position: absolute;
}

// 180 degrees
.wrapper {
  transform: rotate(180deg);
  height: 100vh;
  width: 100vw;
  position: absolute;
}

// 270 degrees
.wrapper {
  transform: rotate(270deg);
  transform-origin: top left;
  top: 100vh;
  height: 100vw;
  width: 100vh;
  position: absolute;
}

How do I rotate the whole web page 90, 180 or 270 degrees?

2 Answers2