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.
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
[...] 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 [...]
[...] CSS 3 Transform Experiment [...]
[...] CSS3 Transform Experiment – Voir la démo. [...]
[...] CSS 3 Transform Experiment [...]
[...] CSS 3 Transform Experiment [...]
[...] CSS 3 Transform Experiment [...]
[...] CSS 3 Transform Experiment [...]