admin管理员组

文章数量:1323702

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?

Share Improve this question edited Dec 28, 2013 at 2:45 Tom Fenech 74.7k13 gold badges118 silver badges151 bronze badges asked Dec 28, 2013 at 2:22 user3131309user3131309 211 silver badge2 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

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