CSS Master

Applyingtranslate(100px, 200px)istheequivalentoftranslateX(100px)

translateY(200px).

Positivetranslationvaluesmoveanelementrightward(fortranslateX)ordownward

(fortranslateY).Negativevaluesmoveanelementtotheleft(translateX)orup

(translateY).

Translationsareparticularlygreatformovingitemsleft,right,up,ordown.Updating

thevalueoftheleft,right,top,andbottompropertiesforcesthebrowsertorecal-

culatelayoutinformationfortheentiredocument.Buttransformsarecalculated

afterthelayouthasbeencalculated.Theyaffectwheretheelementsappearon

screen,butnottheiractualdimensions.Yes,it’sweirdtothinkaboutdocument

layoutandrenderingasseparateconcepts,butintermsofbrowsers,theyare.^7

skew, skewX, and skewY

Skewtransformationsshifttheanglesanddistancesbetweenpointswhilekeeping

theminthesameplane.Skewtransformationsarealsoknownassheartransforma-

tions,andtheydistorttheshapesofelementsasseeninFigure6.14,wherethe

dashedlinerepresentstheoriginalboundingbox.

Figure 6.14. A rectangle is skewed 45 degrees along its X-dimension

(^7) Google’sOptimizingPerformance[https://developers.google.com/web/fundamentals/performance/]
discussessomeofthedifferencesbetweenlayoutorrendering,andpaintingordrawing.
240 CSS Master