How to set CSS on body tag to rotate a page using JavaScript

Question

I found the following code while reading a related question at this page: Rotate a webpage clockwise or anticlockwise

html {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
}

--

My question is how do I set this CSS via JavaScript?

When a visitor clicks on an image, I want to use JavaScript to modify the HTML tag's style using the settings above.

Thanks in advance.

read http://stackoverflow.com/questions/14675820/use-variables-to-set-in-style-with-javascript — anurupr, Apr 02 '14 at 08:37
I accepted the one I did because it's pure Javascript .. however the JQuery ones were great answers too. thanks! — Frez, Apr 02 '14 at 09:11

score 1 · Accepted Answer · edited May 23 '17 at 11:57

The easiest way to do this is by putting this in a class, and assigning that class dynamically using JavaScript:

CSS:

html.rotateme {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
}

JavaScript:

document.documentElement.setAttribute('class', 'rotateme'); //Note that this will override the current class

Since you're using a very recent CSS feature, you probably don't need to support older browsers. Therefore, you can also use Element.classList to add a class.

To prevent this from throwing an exception in older browsers, you can check for the existance of it first:

JavaScript:

document.documentElement.classList && document.documentElement.classList.add('rotateme'); //This won't  override the current class

See also: Change an element's class with JavaScript

score 0 · Answer 2 · answered Apr 02 '14 at 08:39

You use the style attribute on the HTML node.

Something like this will do it:

var htmlNode = document.documentElement;
htmlNode.style.webkitTransform = 'rotate(180deg)';
htmlNode.style.mozTransform = 'rotate(180deg)';

Then, to undo the rotate, set the values to an empty string:

var htmlNode = document.documentElement;
htmlNode.style.webkitTransform = '';
htmlNode.style.mozTransform = '';

score 0 · Answer 3 · answered Apr 02 '14 at 08:41

0

Simple

$('#wrap').on('click',function(){
$('html').css('-webkit-transform','rotate(180deg)');
$('html').css('-moz-transform','rotate(180deg)');})

answered Apr 02 '14 at 08:41

deadulya

686
6
15

Thank you - I like the simplicity of this one. – Frez Apr 02 '14 at 09:12
I'ts good practice to at least give some explanation in your answer. Also, the OP did not mention the use of jQuery. – Justus Romijn Apr 02 '14 at 09:39

Mike · Answer 4 · 2014-04-02T09:02:34.620

0

**JQUERY**

$("#imgID").on("click", function(){
    $('html').css({"-webkit-transform": "rotate(180deg)", "moz-transform": "rotate(180deg)"});
});

only js

use user2428118's answer, it's a solid solution.

edited Apr 02 '14 at 09:02

answered Apr 02 '14 at 08:43

Mike

62
6

score 0 · Answer 5 · answered Apr 02 '14 at 08:47

0

define a class for this:-

.htmlrotate {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
}

onclick of the button, run this:-

document.documentElement.classList.add('htmlrotate');

answered Apr 02 '14 at 08:47

vivek_nk

1,590
16
27

score 0 · Answer 6 · answered Apr 02 '14 at 08:56

0

  $('html').bind('click', function () {
                $('html').css({
                    '-webkit-transform': 'rotate(90deg)',
                    '  -moz-transform': 'rotate(90deg)'
                })
            });

answered Apr 02 '14 at 08:56

LifeSoul

111
5

How to set CSS on body tag to rotate a page using JavaScript

6 Answers6

CSS:

JavaScript:

JavaScript: