Figure 6.30. Rotating around both the X and Y axes by 45°Therotate3d()functionacceptsfourarguments.ThefirstthreemakeupanX,Y,
Zdirectionvector,andeachoftheseargumentsshouldbeanumber.Thefourth
argumentforrotate3d()shouldbeanangle.Thetransformedobjectwillberotated
bytheanglearoundthedirectionvectordefinedbythefirstthreearguments.Whatthosefirstthreenumbersactuallyarematterslessthantheratiobetweenthem.
Forexample,transform: rotate3d(100,5,0,15deg);andtransform: ro-
tate3d(20,1,0,15deg);haveequivalent3Dmatricesandproducethesameeffect.Thatsaid,becauseofhowtherotate3dmatrixiscalculated,^8 somethinglike
transform: rotate3d(1, 500, 0, 15deg);won’tproduceasignificantlydifferent
effectthantransform: rotate3d(1, 1, 0, 15deg);.Justaboutanynon-zerovalueforanyofthefirstthreeparameterswillcreateatilt
alongthataxis.Zerovalueswillpreventatilt.Asyoumayhaveguessed,rota-
teX(45deg)istheequivalentofrotate3d(1, 0, 0, 45deg)androtateY(25deg)
couldalsobewrittenasrotate3d(0, 1, 0, 25deg).Ifthefirstthreeargumentsare 0 (suchastransform: rotate3d(0, 0, 0, 45deg)),
theelementwon’tbetransformed.UsingnegativenumbersfortheX,Y,orZvector(^8) http://dev.w3.org/csswg/css-transforms-1/#Rotate3dDefined
252 CSS Master