How to Flip a Page Upside-Down with CSS

For April Fool’s Day this year, I decided to do an amusing CSS trick instead of my usual fake news story. I turned the entire web site on its head, using a simple CSS3 attribute, and added a bit of JavaScript to jump down to the bottom (or top?) to complete the effect.

The CSS is simple, though of course it won’t work for Internet Explorer, except for the very latest version.

#flipdiv {
    width: 100%;
    height: 100%;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

Now you want to wrap everything inside your <body> element with a new <div>. (You have to style the div instead of the body itself, as you get some weird box model issues otherwise.) It would look something like this:

<div id="flipdiv">
...everything else...

If you want to automatically scroll down to the new top of the page, a.k.a. the bottom, you can use a little JavaScript snippet to bump it down.

<script type="text/javascript">
window.onload = scrollDownToTheTop;
function scrollDownToTheTop() {
window.scrollTo(0, document.body.scrollHeight);

Silly, but not bad for an April Fool’s joke. :)

BrowserQuest: A Massively Multiplayer Game in HTML5 and JavaScript

Imagine a massively multiplayer game using HTML5 features, such as Canvas and WebSocket, that works in any modern browser. Ridiculous, you say? Then you haven’t seen BrowserQuest yet. The clever demonstration, featured on the Mozilla Hacks blog, works on both desktops and mobile devices,…

Prediction: Higher Resolution MacBooks Soon to Come

The addition of a 2048×1536 pixel “retina” display on the latest model of the iPad has created an interesting conundrum: many developers will no longer be able to fit the iOS Simulator on their computer screens. If you toggle it into the mode added…

BlogBuzz March 17, 2012

Thinking Async

I’ve written about loading JavaScript asynchronously in the past, as it’s a great way to decrease load times and prevent hang-ups when third-party scripts don’t load properly. But Chris Coyier has went and compiled the definitive guide. It covers the basic concepts and reasons…

What to Do After You Install Ubuntu Server in VMwware Fusion

I recently installed a fresh copy of Ubuntu Server in a VMware Fusion virtual machine, so I could test some things out locally. (It’s a great way to set up a local development server with a similar configuration to your production server.) The initial…

BlogBuzz March 10, 2012

Scripting News Hits 15 Year Mark, and Other Really Old Websites

Back in the spring of 1997, Dave Winer launched a website known as Scripting News. It was one of the first sites that would come to be known as weblogs, or simply “blogs.” Mr. Winer is famous for his involvement with the development of…

What is a Kibibyte?

If there are eight bits in a byte, how many bytes are there in a kilobyte? If you’re familiar with computers, you might say 1,024, while someone who is less so may say 1,000. Who is right? Surprisingly, the person who answered 1,000 would…

Tinycon: Favicon Alert Bubbles

Tinycon is a neat script that manipulates the favicon of a page. Using a simple JavaScript call, you can add a little alert bubble over the icon, and change the number within. If the browser doesn’t support Canvas, it falls back to appending a…