CSS Master

Figure 6.12. An element at its original size (left) and with transform: scale(-2) applied

Multipliers of Zero

Usingscale(0)willcausetheelementtodisappear,becausemultiplyinga

numberbyzeroresultsinaproductofzero.

Usingscale(1)createsanidentitytransformation,whichmeansit’sdrawntothe

screenasifnoscalingtransformationwasapplied.Usingscale(-1)willnotchange

thedrawnsizeofanelement,butthenegativevaluewillcausetheelementtobe

reflected.

It’spossibletoscaletheXandYdimensionsseparatelyusingthescalefunction.

Justpassittwoarguments:scale(1.5, 2).ThefirstargumentscalestheX-dimen-

sion;thesecondscalestheY-dimension.Wecould,forexample,reflectanobject

alongtheX-axisaloneusingscale(-1, 1).Passingasingleargumentscalesboth

dimensionsbythesamefactor.

2D Translation Functions: translateX, translateY,

and translate

Translatinganelementoffsetsitspaintedpositionfromitslayoutpositionbythe

specifieddistance.Aswithothertransforms,translatinganelementdoesn’tchange

238 CSS Master