CSS 3 Transform Experiment

CSS 3 Transform Experiment
CSS 3 Transform Experiment

Transform is a pretty exciting feature that’s been implemented in CSS 3. So why haven’t we used more of it in our designs? When I made the switch to web design, the thing I missed most was the ability to angle text. Sure it could be done with images, but at a price called page weight. I’ve searched online and there are a few examples that use the feature to make cubes, or rotate an image in an attempt to recreate some type of flash-like image gallery, but I haven’t seen it used in a visually impacting way. I asked myself why?

The best way to learn is by doing. So in my attempt to learn why, this is what I created. It was about an hours time and I think it’s pretty stunning visually for the web. This works in Chrome, Safari, Firefox, Opera and maybe IE9(not tested). If it doesn’t work, you’re not on the current browser version. Sorry IE6, IE7 and IE8, you’re out of luck.

NOTE: I know this isn’t exactly practical for a desk-top or a tab-top, but how easy is it to rotate the screen on your iPad or the countless other slates that will be coming out.

Anyways check it out, look at the simple code and let me know what you think. I’d love to hear your thoughts.

Check it out here!

P.S. This was originally designed and shared over a year ago, before my site was deleted automatically by goDaddy for discontinuing my auto renew three weeks before my account expired.

7 Trackbacks

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>