Fornow,it’senoughtoknowthatthispropertyaddsasenseofdepthandexaggerates
theeffectofthethree-dimensionalrotation.CompareFigure6.29toFigure6.28.
BothhavebeenrotatedalongtheY-axisby55°,butinFigure6.29,theparentcon-
tainerhasaperspectivevalueofnone.Ourobjectlooksmoresquishedthanrotated.
Useperspectiveonacontainerelementwhencreatinga3Dtransform.
Figure 6.29. An element with transform: rotateY(55deg), nested within a container with perspective:none
Beware Infinitesimal Thickness
There’sanotherfacettobeawareofwhenworkingwith3Drotations.Rotatingan
elementby±90°or±270°cansometimescauseittodisappearfromthescreen.
Eachelementonapagehasaninfinitesimalthickness.Byrotatingitaquarteror
three-quartersofaturn,we’relookingatitsinfinitesimallythinside.It’skindof
likelookingattheedgeofasheetofpaperthat’sperpendiculartoyourface.Ad-
justingtheperspectiveandperspective-originvaluesofaparentelement
canpreventthisbehaviorinsomecases,butnotallofthem.Rotating around Multiple Axes with rotate3d()
Sometimes,wewanttorotateanobjectaroundmorethanoneaxis.Perhapsyou
wanttorotateanelementcounter-clockwiseandtiltitby45°asinFigure6.30.This
iswhatrotate3d()does.
CSS Transforms 251