Javascript Function - Rotating Webpage

Question

I am trying to use the following code to rotate a website but am a bit of a beginner in javascript and have come a bit stuck...

 func roatation {   
    body {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
  }
}

I know the code for body was html? But can't work out how I would put this in a function?

Thanks

score 0 · Answer 1 · answered Jun 25 '15 at 17:33

0

You can do this:

CSS

body.rotate {
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
}

JS

function rotate() {
    document.body.className = "rotate"; // apply .rotate class
}
rotate();

By moving the rotation definition to a class you can apply and remove the rotation by setting the class property of the body.

answered Jun 25 '15 at 17:33

Halcyon

Is there anyway I could do this without CSS? The reason is because I am using some software that will only allow me to run javascript on a button click. – dwinnbrown Jun 25 '15 at 17:36
That seems like a bit of strange requirement. You can always include an external stylesheet with JavaScript. You can even define an inline stylesheet. If all that is not good you can change the setting of the class by setting/unsetting the related `style` properties: `body.style.webkitTransform = "rotate(-30deg)";` – Halcyon Jun 25 '15 at 17:39
I might be able to imbed a stylesheet... is there any examples of how to use this? I couldn't find much on it. – dwinnbrown Jun 25 '15 at 17:44
Plenty, here is one: http://stackoverflow.com/questions/11833759/add-stylesheet-to-head-using-javascript-in-body – Halcyon Jun 25 '15 at 17:45

1 Answers1