Unleash The CSS Tornado!

The most revolutionary web technology unleashed on the planet.
The most revolutionary web technology unleashed on the planet.

With only four lines of code, it creates chaos, brings mayhem, and strikes fear into the hearts of webpages all over the World Wide Web. All who are unfortunate enough to stand in its path are swept away to become lost in an apocalyptic world of another dimension. Behold… the CSS Tornado!




Unleash The CSS Tornado!

One day, I got this crazy idea. What if we rotated every element on a webpage by 180 degrees? Ridiculously simple – just four lines of code. Nothing much, right?

* {
    transform: rotate(180deg);
    transition: 10s;

Let’s see what this does. By itself, the universal selector, *, selects every single element on a webpage.

The transform rule rotates everything by 180 degrees.

Finally, we make a CSS transition that lasts 10 seconds so we can see all of the chaos in action.

To support all major browsers, we’ll have to add a few lines to the code. A little tedious, but surely you can’t resist unleashing some tornado madness in any browser, yes?

* {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition-duration: 10s;
    -moz-transition-duration: 10s;
    -ms-transition-duration: 10s;
    -o-transition-duration: 10s;
    transition-duration: 10s;

Want to experience a CSS Tornado for yourself? I’ve got a button here that will generate one for you. But I’m warning you right now – getting caught in the vortex will warp you to another dimension. You may not be able to escape. Please heed my warning. It’s for your own safety. Really.

Unleash Tornado

The button runs a JavaScript script that dynamically adds the above CSS rule to the current page. If you like, you can drag the above button into your bookmarks bar and unleash a tornado onto any page you visit. Perhaps you can prank your friends with it!

Wait… if it rotates everything 180 degrees, why are some things still right side up?

Since multiple nested elements are selected, the rotation effect is cumulative. For example, an element nested inside of another element will be rotated 360 degrees in total, because both the element and its parent were rotated 180 degrees. You can probably guess how chaotic things get as you have more and more elements nested inside each other – an element far down the tree will end up spinning like crazy!

Visit the egg icon at the top left of this page to play the site-wide Easter Egg Hunt, and see if you can find two Easter eggs that generate a reversible CSS Tornado!

By | 2016-10-13T19:57:31+00:00 July 4th, 2016|8 Comments

About the Author:

Darryl Yeo is a young programmer, web developer, computer graphics artist, musician, and composer who hopes to inspire others through his projects and inventions. Read more about Darryl.

Leave a Comment

8 Comments on "Unleash The CSS Tornado!"


October 19, 2015 11:14 am
Go to Top