CSS Master

Translating Depth with translateZ() and

translate3d()

Earlierinthischapter,wediscussedhowtotranslateanelementhorizontallyor

verticallyusingtranslateX()andtranslateY().Wecanalso,however,translate

alongtheZ-axis.Therearetwofunctionsthatallowustodothis:translateZ()

andtranslate3d().Whencombinedwithtransitions,thesefunctionsmakeit

possibletocreateinterestingzoomeffects.^10

ThetranslateZ()functionacceptsasinglelengthparameterasitsargument.Length

unitsaretheonlyvalidunitsforthisfunction;percentageswon’twork.The

translateZ()functionshiftstheobjecttowardsorawayfromtheuserbythespe-

cifiednumberofpixels.Negativevaluesshifttheelementorgroupawayfromthe

user,ineffectshrinkingit,ascanbeseeninFigure6.33.

(^10) The 2011 BeerCamp[http://2011.beercamp.com/]sitehasoneofthemorememorableexamplesof
thistechnique.
256 CSS Master