CSS Master

Figure 6.8. A three-dimensional coordinate system

ArenderedHTMLdocumentis,essentially,acoordinatesystem.Thetop-leftcorner
istheorigin,withcoordinatesof(0,0)or(0,0,0).ValuesincreasealongtheX-axis
asyoumoveright.ValuesincreasealongtheY-axisasyoumovedownthescreen
orpage.Z-axisvaluesincreaseaselementsmovetowardsthevieweranddecrease
astheymoveawayfromtheviewer.

Settingthevalueoftransformtoavaluebesidesnoneaddsalocalcoordinate
systemtotheselectedelements.Theorigin—point(0,0)or(0,0,0)—inthislocal
coordinatesystemsitsatthecenteroftheelement’sboundingbox.Wecanchange
thepositionoftheorigin,however,byusingthetransform-originproperty.Points
withintheelement’sboundingboxarethentransformedrelativetothislocalorigin.

The transform-origin Property

Thetransform-originpropertyacceptsuptothreevalues:oneforeachoftheX,
Y,andZpositions.Forexample,transform-origin: 300px 300pxfora2Dtrans-
formation,ortransform-origin: 0 0 200pxfora3Dtransformation.

CSS Transforms 233