CSS Master

Figure 6.37. A group of transformed elements nested within a container with perspective: 2000px

Modifying the Point of View with perspective-origin

Ifyou’vestudiedhowtodrawinperspective,theperspective-originproperty

willfeellikeoldhat.Todrawinperspective,youfirstmakeapointonyourpage

orcanvas.Thispointisknownasthevanishingpoint.It’sthepointinyourdrawing

atwhichitemswilltheoreticallydisappearfromview.

Next,drawashapeofyourchoosing.We’regoingtokeepthisexamplesimple,and

usearectangle.

Stepthreeistodrawaseriesoflinestowardsthevanishingpoint,asshownin

Figure6.38.Theselines,alsoknownasconvergencelines,serveasguidesfor

drawingshapesthataresizedappropriatelygiventheirperceiveddistancefromthe

viewer.

262 CSS Master