CSS 3 Transform Experiment

CSS 3 Transform

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

  1. [...] This post was mentioned on Twitter by Gary Thomas and Martin Burdon, Carlos Malavé. Carlos Malavé said: RT @9swords: CSS 3 Text Transform Experiment – http://bit.ly/btCRAu [...]

  2. [...] CSS 3 Transform Experiment [...]

  3. By Le petit journal permanent de CSS3 on January 6, 2011 at 3:54 am

    [...] CSS3 Transform Experiment – Voir la démo. [...]

  4. [...] CSS 3 Transform Experiment [...]

  5. [...] CSS 3 Transform Experiment [...]

  6. By 24个CSS3文本效果示例教程-站博 on June 27, 2011 at 12:07 am

    [...] CSS 3 Transform Experiment [...]

  7. By 24 cool CSS3 text effect examples and tutorial on September 8, 2011 at 6:30 pm

    [...] CSS 3 Transform Experiment [...]

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> <pre lang="" line="" escaped="" highlight="">