2D Transformations 137You can see how this example displays in Figure 12-1. Note that I posi-
tioned another h2 element with a light gray background in the same place
as the first one so you can compare the rotated element with the default
(nonrotated) element. I’ll do the same for most examples in this chapter.
Figure 12-1: An element rotated by −15 degrees
Position in Document Flow
An important point to make before I move on: Transformed elements
only affect visual rendering of the page, not document layout. The element
itself retains its place in the document flow, so all subsequent elements are
affected by it and its margin and padding. The transformed element does
not affect the page layout but appears as if it were in a new layer above the
rest of the page, which means it can cover subsequent elements.
To illustrate what I mean, I’ll rotate another element, but this time flow
some text under it so you can see the effect of the transformation. Here’s
the code to rotate the element:
h2 { transform: rotate(-10deg); }
BroWSer SuPPorT for 2d TrAnSforMATionS
As I mentioned in the beginning of the chapter, browser support for 2D trans-
forms is pretty widespread, although not all browsers support the transform
property without a vendor prefix. IE9, Safari, and older versions of the Android
browser all require a prefix, which means that to use this property currently,
you have to specify it three times:E {
-ms-transform: function(value); /* IE9 */
-webkit-transform: function(value); /* WebKit */
transform: function(value);
}