CSS Master

Figure 6.22. The 4×4 scaling transform matrix

Whenwecombinetransforms—suchastransform: scale(2) translate(30px,
50px)—thebrowsermultipliesthematricesforeachfunctiontocreateanewmatrix.
Thisnewmatrixiswhat’sappliedtotheelement.

Buthere’sthethingaboutmatrixmultiplication:itisn’tcommutative.Withsimple
values,theproductof 3 × 2 isthesameas 2 ×3.Withmatrices,however,theproduct
ofA×BisnotnecessarilythesameastheproductofB×A.Let’slookatFigure6.23
asanexample.We’llcalculatethematrixproductoftransform: scale(2)
translate(30px, 50px).

Figure 6.23. The product of the matrices for scale(2) and translate(30px, 50px)

Ourelementhasbeenscaledbyafactoroftwo,andthentranslated 60 pixelshori-
zontallyand 100 pixelsvertically.Wecanalsoexpressthisproductusingthematrix
function:transform: matrix(2, 0, 0, 2, 60, 100).Nowlet’sswitchtheorder

CSS Transforms 247