Transformsareappliedafterelementshavebeensizedandpositioned.Unlikefloated
elements,transformedelementshavenoeffectoncontentflow.^5 Floatinganelement
removesitfromthenormalflow,andcausesotherelementstowraparoundit.For
transformedelements,thisisnotthecase.
Transformsdon’taffectCSSlayout,althoughtransformedchildelementsmay
overflowtheparentelement’sboundingbox.Becausetransformsareappliedafter
thelayouthasbeencalculated,theydonotaffecttheHTMLElement.offsetLeftor
HTMLElement.offsetTopDOMproperties.Usingthesepropertiestodetectthe
renderedpositionofanelementwillgiveyouinaccurateresults.
Transformsdo,however,affectclientrectanglevaluesandvisualrenderingofele-
ments.Todeterminetherenderedleftandtoppositionsofanelement,usethe
HTMLElement.getClientRects()orHTMLElement.getBoundingClientRect()DOM
methods(forexample,document.getElementById('#targetEl').getClien-
tRects()).
Becausetheydon’tforcethebrowsertocalculatepagelayout,transformstypically
performbetterthanpropertiessuchasleftandheightwhenanimated.
transform Creates a Local Coordinate System
YoumayrecallfromgeometryclassthattheCartesiancoordinatesystemisaway
ofspecifyingpointsinaplane.Youmayalsorecallthataplaneisaflattwo-dimen-
sionalsurfacethatextendsinfinitelyalongthehorizontalandverticalaxes.These
axesarealsoknownastheX-axisandY-axis.
PointvaluesalongtheX-axisincreaseasyoumovefromlefttoright,anddecrease
fromrighttoleft.Y-axispointvaluesincreaseasyoumoveup,anddecreaseasyou
movedown.TheXandYaxesareperpendiculartoeachother.Wheretheycross
isknownastheorigin,andthecoordinatesofitslocationarealways(0,0)Figure6.7
illustratesthis.
(^5) DocumentflowisdescribedbytheVisualformattingmodel[http://www.w3.org/TR/CSS21/visuren.html]
sectionoftheCSS2.1specification.UpdatestothismodelarepartlydescribedbyCSSDisplayModule
Level3.[http://dev.w3.org/csswg/css-display/]
CSS Transforms 231