CSS Master

Figure 6.34. The effect of transform: translateZ(150px)

IfthevalueoftranslateZ()islargeenough,theelementwillbedisappearfrom

view.It’sactuallymovedbehindtheviewerinthisimagined3Dspace.Similarly,

ifthevalueoftranslateZ()issmallenough,saytranslateZ(-40000px),theele-

mentwilldisappearfromviewbecauseitisnow“toofar”fromtheuserandtoo

smalltodrawonscreen.

translate3d()isjustamoreconcisewayoftranslatingintwoorthreedirections

atonce.Itacceptsthreearguments:oneeachfortheX,Y,andZdirections.Trans-

lationvaluesfortheXandYdirectionargumentsmaybelengthsorpercentages;

however,itsZ-directionargument(thethirdargument)mustbealengthvalue.Keep

inmindthattranslateX(50%) translateY(10%) translateZ(100px)istheequi-

valentoftranslate3d(50%, 10%, 100px).Usetranslate3dwhenyouwantto

translatemorethanonedimension,butwantmoreconcisecode.

Scaling the Z-dimension: scaleZ() and scale3d()

Wecanalsoscaleanobject’sZ-dimensionusingthescaleZ()andscale3d()

functions.ThescaleZ()functiontransformspointsalongtheZ-axisalone,while

scale3d()letsusscaleallthreedimensionsatonce.ScalingtheZ-dimension

258 CSS Master