CSS Master

pointsalongtheplanethatsitperpendiculartotheviewer.Withtheexceptionof
rotateZ(),thesefunctionscreateandchangetheillusionofdepthonscreen.

rotateX() and rotateY()

TherotateX()androtateY()functionsrotateanelementaroundtheXandYaxes
respectively.UsingrotateX()createsasomersaulteffect,causinganobjecttoflip
top-over-tailaroundahorizontalaxis.WithrotateY(),theeffectismorelikethat
ofaspinningtop,rotatingaroundaverticalaxis.

Likerotate(),bothrotateX()androtateY()acceptananglemeasurementasan
argument.Thisanglecanbeexpressedindegrees(deg),radians(rad),gradians
(grad),orturnunits.Asmentionedearlierinthechapter,rotateZ()worksthe
samewayasrotate().It’sarelicfromwhen2Dand3Dtransformsweredefined
inseparatespecifications.

PositiveanglevaluesforrotateX()causeanelementtotiltbackwards,asshown
inFigure6.25.

Figure 6.25. An element with transform: rotate(45deg) applied

NegativeanglevaluesforrotateX()dotheopposite,causingtheelementtotilt
forwardasisshowninFigure6.26.

CSS Transforms 249