CSS3 transformations: rotate

One of the newly introduced features in CSS3 is the concept of trasformations which allows developers to apply the same rendering effects once available only in SVG to common HTML page elements. For example, if we want to apply a rotation to a simple box, now we can write the following:

#rotated {
    width: 200px;
    height: 150px;
    background: orange;
    margin: 2em auto;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

And this is the result in all supporting browsers:

This feature is currently supported by the latest versions of Firefox, Chrome and Safari. Note, however, that I've specified the vendor-specific extensions first and then the standard property. By doing so, we make sure that a browser will use the standard property if it's supported.