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!

Updated

Category

Languages

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-07: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.

8 Comments

  1. Portalis October 19, 2015 at 11:14 am - Reply
    • Darryl Yeo October 19, 2015 at 9:17 pm - Reply

      I’m glad you had fun with it!

      • Portalis October 22, 2015 at 12:36 pm - Reply

        thanks. I’m a big fan of your work. I’m a bit of an amature programmer, I just got the intro to Javascript challenge patch last year, but is there any way I can help? I have a suggestion for a boss battle at the end of Transcolors. Maybe you could make Lord Gray a massive rouleaux pentagon, and the arena could be a square surrounding him. Your triangle characters have to get to the corners of the square, one color for each corner, and after the right triangle gets to his corner, the other triangles can’t switch to that color. Meanwhile, Gray would be rolling in his massive square hole, attacking with anti-color lazers. and then a cutscene would zoom out on the completed level, and the triangles would bounce the lazers back with their own colors, and the color beams would banish Gray, making him explode with all the colors he stole. Of course, assuming you haven’t finished the game and you’re just editing now.

        • Darryl Yeo October 22, 2015 at 8:54 pm - Reply

          That’s an idea! So far I have not implemented any of the storyline, and doubt there will be one, at least in the first release. But if and when I get around to it, I’ll definitely consider making a “boss battle” puzzle.

          • Portalis October 26, 2015 at 11:35 am

            I’ll be waiting.

      • Portalis November 3, 2015 at 5:00 pm - Reply

        I like coded storms. Can you do a css solar flare?

        • Darryl Yeo November 4, 2015 at 12:47 am - Reply

          Perhaps I will! I’ll add that to my mental list of potential projects.

          • Portalis November 10, 2015 at 2:50 pm

            This is going to be good!

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Go to Top