CSS Master

ofthesetransforms;thatis,transform: translate(30px, 50px) scale(2).The

resultsareshowninFigure6.24.

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

Noticethatourobjectisstillscaledbyafactoroftwo,buthereit’stranslatedby 30

pixelshorizontallyand 50 pixelsverticallyinstead.Expressedusingthematrix

function,thisistransform: matrix(2, 0, 0, 2, 30, 50).

It’salsoworthnotingthatinheritedtransformsfunctionsimilarlytotransformlists.

Eachchildtransformismultipliedbyanytransformappliedtoitsparent.Forex-

ample:

<div style="transform: skewX(25deg)">

<p style="transform: rotate(-15deg)"></p>

</div>

isrenderedthesameas:

<div>

<p style="transform: skewX(25deg) rotate(-15deg)"></p>

</div>

Thecurrenttransformmatrixofthepelementwillbethesameinbothcases.Though

we’vefocusedon2Dtransformssofar,theabovealsoappliesto3Dtransforms.The

thirddimensionaddstheillusionofdepth.Italsobringssomeadditionalcomplexity

intheformofnewfunctionsandproperties.

3D Transform Functions

Thereareninefunctionsforcreating3Dtransforms.Eachofthesefunctionsmodifies

theZ-coordinatesofanelementand/oritschildren.Remember,Z-coordinatesare

248 CSS Master