Transform(ers): More than meets the eye
This has probably been discussed on other Te(a)chno sites, but CSS3 is just a label for the new version of CSS that contains a new set of styling options for webpage elements. When looking at the following examples, it is important to note that CSS doesn't actually "do" anything, it really just tells your browser to do something (e.g. change font face). As a result CSS is dependent on which browser is rendering your page. CSS that gets perfect results in Firefox 4 may not work at all in Firefox 3.6 and may sort of work in IE8. This is especially true with CSS3 features because they are not "final," so support is much less consistent across browsers. With that in mind, let's transform.
With the introduction of CSS3, your stylesheets can now tell your browser to change the position and orientation of elements on a page without javascript or other scripting languages. Also, if you add CSS transitions to transforms, you can get animated effects. These transformations may be a one-time thing (rotating an element 180 degrees), continuous (elements that rotate all the time) events, or conditional events (you hover over an element and it fades away).
3 transformations
- Hover over this line and make it turn upside down.
- Highlight this line to skew the text.
- Hover over this line and make it slide to the right.
Resources and Examples: