CSS Master

changesthedepthofanobject,butinsomecombinationscanalsobeusedtocreate
zoomeffects.Experimentwiththemandsee.

ThescaleZ()functionacceptsanumberasitsargument.AswithscaleX()and
scaleY(),positivevaluesgreaterthan 1 increasethesizeoftheelement’sZ-dimen-
sion.Valuesbetween 0 and 1 decreaseitssize.Negativevaluesbetween 0 and-1
decreasetheelement’ssizealongtheZ-dimension,whilevalueslessthan-1increase
it.Becausethesevaluesarenegative,however,theelementanditschildrenwillbe
inverted.InFigure6.35,theleftdieshowsanelementgroupwithtransform:
scaleZ(0.5)applied.TheboxontherighthasatransformationofscaleZ(-0.5)
applied.Noticethatpositionsofthesix-dotfaceandsingle-dotfacehavebeen
swappedintheexamplewithanegativescale.

Figure 6.35. Element groups with transform: scaleZ(0.5) and transform: scaleZ(-0.5) styles

Thescale3d()functionacceptsthreearguments,andallthreeargumentsarere-
quiredinorderforthisfunctiontowork.ThefirstargumentscalestheXdimension.
ThesecondargumentscalesitsYdimension,andthethirdargumentscalestheZ
dimension.Aswithtranslate3d(),thescale3d()functionisjustamoreconcise
waytowritetransformsthatscaleinmultipledimensions.Ratherthanusing
scaleX(1.2) scaleY(5) scaleZ(2),forexample,youcouldusescale3d(1.2,
5, 2).

Transformfunctionsareonlypartofwhatyouneedtocreate3Dtransforms.You’ll
alsorequireafewmoreCSSproperties.Thesepropertiesmanagehowobjectsare
drawninasimulatedthree-dimensionalspace.Usingthemwillmakeyour3D
transformsmorerealistic.

CSS Transforms 259