X

Hey! We highly recommend you launch this experiment in Google Chrome. It may run slower, or not at all, in other browsers.

Okay, I'll download Google Chrome I'm willing to risk it
X

Report This Experiment

X

Share with a friend

An e-mail has been sent. Thank you for sharing this Experiment!

Close

Back to All

Gear

November 25, 2009
Author:

Andy Li

http://www.onthewings.net/
Location:
Hong Kong
Rate Experiment (108 ratings):
1 2 3 4 5  
From the Author:

When mouse over the squares, they rotate like gears.

This is a CSS-only experiment. Since it uses CSS animation and CSS transform, it can only be shown perfectly in lastest version of Safari and Chrome.

PHP is used in the back-end to generate the HTML. There is no tricky things there, just tired of typing those repeating things.

See my blog post for more info:

http://blog.onthewings.net/2009/11/24/css-only-experiements/

Technology:

CSS transition, CSS transform

Comments

By Chrome Hound on May 21, 2010

I think it's really cool.

Reply to this comment
By Chrome Hound on May 21, 2010

Don't let these peeps discourage you. Keep going you're doing great.

Reply to this comment
By 5254565851535759 on May 15, 2010

watz the point?

Reply to this comment
By Austin on April 29, 2010

I'm sorry, don't take this personal, but it is kinda boring. I know you will do better next time though! : )

Reply to this comment
By Ethan on April 08, 2010

I have to say this is really cool! I didn`t know it was possible either. AWESOME!

Reply to this comment
By aaron on January 22, 2010

wow this is dumb

Reply to this comment
By rachel on March 06, 2010

every experiment must accomplish every task

Reply to this comment
By randomguy on December 11, 2009

very gayy

Reply to this comment
By BoogsterSU2 on December 06, 2009

Hey genius, u mispelt "submit" on the button xP

Reply to this comment
By doyoumeanmisspelt? on January 14, 2010

okay and what is "mispelt"?

Reply to this comment
By Andy on December 06, 2009

oh rely... just corrected. thx :)

Reply to this comment
By Tobias on December 04, 2009

That was very interesting display of CSS.

Make sure to check this out in Chrome: Firefox doesn't make the gears turn correctly.

Reply to this comment
By Caleb on December 01, 2009

Very, very, interesting.

Didn't know you could do something like this purely with CSS

Reply to this comment
By The Oracle on November 29, 2009

This experiment stinks

Reply to this comment
By joe on November 30, 2009

Be sure to try it in Chrome -- it's much more interesting than Firefox.

Reply to this comment
By muhmi on November 27, 2009

Hi! Great CSS experiment! Thanks! I didn't know that would be even possible before this!

Reply to this comment
By hui on November 27, 2009

hi , this stinks

Reply to this comment
By paul on November 26, 2009

lame

Reply to this comment

Add a comment

All fields are required to prevent spam.