Ifonevalueisspecified,thesecondvalueisassumedtobecenter,andthethird
valueisassumedtobe0px.BoththeXandYcoordinatesmaybepercentages,lengths,orpositioningkeywords.
Positioningkeywordsareleft,center,right,top,andbottom.TheZposition,
however,mustbealength.Inotherwords,transform-origin: left bottom 200px
works,buttransform-origin: left bottom 20%doesnot.Thepositionofthetransformoriginisrelativetotheelementbeingtransformed.It
movesthe(0,0)pointofthelocalcoordinatesystemtoanewlocationwithinthe
element’sboundingbox.This,ofcourse,modifiesthetransformation,sometimes
radically.Figure6.9showsatransform-originpointof50% 50%andoneat0px
0px.Figure 6.9. Rectangles with transform-origin values of 50% 50% (left) and 0 0 (right)Nowthatyouknowalittlemoreabouthowtransformsaffectlayout,let’sdiginto
thetransformfunctions.Thisishowwemakethemagic.Transformsletusrotate,
flip,skew,andscaleelements.Whencombinedwithanimationsandtransitions,
wecancreatesophisticatedmotiongraphiceffects.234 CSS Master