P. 1


|Views: 162|Likes:
Published by Bogdan Darius

More info:

Published by: Bogdan Darius on Feb 10, 2013
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





Once an element has been transformed, it acts as if it had position: relative
applied to it; that is, the element is almost like two elements. The original,
pretransformation element 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 sits in a new layer
above the rest of the page, which means the new element can cover subse-
quent elements.

150Chapter 12

In the next example, I’ll rotate the h2 element again, 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(-15deg); }

Figure 12-2 shows the results of this transformation.

Figure 12-2: The effect of a transformed element on the document flow

Both examples are identical, except for the rotate transformation. You
can clearly see the rotated element covers the text under it, which immedi-
ately follows the nontransformed element in the layout. This same rule applies
to any element that has the transform property applied to it, so be aware of
this going forward.

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->