CSS Master

Creating Depth with the perspectiveProperty

Inordertomakea3D-transformedobjectlooklikeit’sactuallysittinginathree-

dimensionalspace,wemustusetheperspectiveproperty.Theperspective

propertyadjuststhedistancebetweenthedrawingplaneandtheviewer.We’restill

talkingaboutascreenandtheprojectionofthree-dimensionalcoordinatesintoa

two-dimensionalspace.Butaddingperspectivetoacontainingelementcausesits

childrentohavetheappearanceofsittingina3Dspace.Yes,youmustapplyper-

spectivetoacontainingelement.

Aswithtransform,perspectivecreatesbothanewcontainingblockandanew

stackingcontextwhenthevalueissomethingotherthannone.Alongwiththe

perspective-originproperty,perspectiveisusedtocalculatetheperspective

matrix.We’llcoverperspective-origininthenextsection.^11

Asidefromthenonekeyword,perspectivealsoacceptsalengthasitsvalue.Values

mustbepositive(forexample,200pxor10em),andpercentageswillfailtowork,as

willnegativevaluessuchas-20px.

Smallervaluesforperspectiveincreasethevisualsizeoftheelement,asseenin

Figure6.36,whichhasaperspectivevalueof500px.Itemsthatarehigheronthe

Z-axisappearlargerthanthosefartheraway.

(^11) Usea-webkit-prefixforperspectiveandperspective-origin to support users of Safari
≤ 8 and UC Browser (-webkit-perspectiveand-webkit-perspective-origin).
260 CSS Master