Upside Flip

A day late I don’t play much anymore :-(. Sorry it was not ready for April Fools day.

I was thinking of having some fun with our main website and wanted to flip the website upside down.  Certainly you can’t leave it like that so I found a way to flip it right side up if you click.  The I figured how to flip it again on another click and what fun.  A bit of a pain if you want to actually use the site though!

In the head section:

.flip {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-backface-visibility: hidden;
.flipback {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-backface-visibility: hidden;
function flipit() {
var e = document.getElementById(“flipable”);
if (e.classList.contains(‘flip’)) {
e.className = “flipback”;
window.scrollTo(0, 0);
if (e.classList.contains(‘flipback’)) {
e.className = “flip”;
window.scrollTo(0, document.body.scrollHeight-500);

Create a div for the whole site with ID=flipable
<div id=”flipable” onclick=”flipit()”> …… </div>

Add scroll script to get the top to show at the bottom:of div
function toBottom() {
window.scrollTo(0, document.body.scrollHeight-500);

Click to flip!!
Notes:  The 500 above is in pixels and  based on a standard monitor resolution being 1024 by 768.  768 did not do it right so I adjusted to 500.  Need to figure a way to determine resolution and calc the scroll by that value.
Of course rotating a different degree value is interesting also!

This entry was posted in Uncategorized. Bookmark the permalink.