javascript - Temporarily flip website upside down using JS and CSS - Stack Overflow

admin管理员组

文章数量:1324995

As a December 28th joke, I would like to temporarily flip my webpage upside down with this code:

body {
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}

and I want to put this code javascript for time:

window.setTimeout(function(){ },3000);

How I can adapt the css code?

As a December 28th joke, I would like to temporarily flip my webpage upside down with this code:

body {
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}

and I want to put this code javascript for time:

window.setTimeout(function(){ },3000);

How I can adapt the css code?

• javascript
• php
• html
• css

Share Improve this question Follow edited Dec 28, 2013 at 2:45 Tom Fenech 74.7k1313 gold badges118118 silver badges151151 bronze badges asked Dec 28, 2013 at 2:22 user3131309user3131309 2111 silver badge22 bronze badges 4

• 5 'Java' is to 'JavaScript' as 'Car' is to 'Carpet'. – Andrew Thompson Commented Dec 28, 2013 at 2:33
• More like 'Java' is to 'Javascript' as 'Chocolate Chip' is to 'Chocolate Chip Cookie'. – Deryck Commented Dec 28, 2013 at 2:37
• 1 Huh? The carpet one works lol, not the chocolate chip cookie. – SSH This Commented Mar 31, 2015 at 18:15
• 1 What kinds of jokes do you do on the other days of the year? – irbanana Commented Dec 7, 2016 at 2:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You can use a class, add the class to the body to perform the transform then remove it after

body.transform {
  transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
}

document.body.className = 'transform';
setTimeout(function(){ document.body.className = ''; },3000);

function flip() {    
Array.prototype.slice.call(  document.querySelectorAll(    'div,p,span,img,a,body')).map(function(tag){tag.style['transform'] = 'rotate(' + 180 +'deg)';});
}
function unflip() {    
Array.prototype.slice.call(  document.querySelectorAll(    'div,p,span,img,a,body')).map(function(tag){tag.style['transform'] = 'rotate(' + 0 +'deg)';});
}

is a way to flip everything on screen then simply

flip()

then to unflip do

unflip()

本文标签： javascriptTemporarily flip website upside down using JS and CSSStack Overflow