argumentsisvalid;itwilljustnegatethevalueoftheangle.Inotherwords,ro-
tate3d(-1, 0, 0, 45deg)isequivalenttorotate3d(1, 0, 0, -45deg).
Usingrotate3d()rotatesanelementbythegivenanglealongmultipleaxesatonce.
Ifyouwanttorotateanelementbydifferentanglesaroundmultipleaxes,youshould
userotateX(),rotateY(),androtate()orrotateZ()separately.
perspective() Function
Theperspective()functioncontrolstheforeshorteningofanobjectwhenoneend
istiltedtowardstheviewer.Foreshorteningisaspecificwayofdrawingperspective;
thatis,simulatingthreedimensionswhenyouonlyhavetwodimensions.With
foreshortening,theendofobjectsthataretiltedtowardstheviewerappearlarger,
andtheendfurthestfromtheviewerappearssmaller.Itmimicsthedistortionthat
occurswhenyouviewanobjectupcloseversusviewingitatadistance.
Themoretechnicaldefinition,pulledfromthetransformsspecification,^9 saysthat
perspective()“createsaperspectiveprojectionmatrix.”Thedefinitioncontinues:
ThismatrixscalespointsinXandYbasedontheirZvalue,scaling
pointswithpositiveZvaluesawayfromtheorigin,andthosewith
negativeZvaluestowardstheorigin.PointsontheZ=0planeare
unchanged.Inpractice,thismeansthatperspective()willhaveavisibleeffectonlywhen
someofanobject’spointshaveanon-zeroZ-coordinate.Useitwithanother3D
functioninatransformlist(forexample,transform: perspective(400px) rota-
teX(45deg)),orapplyittothechildofatransformedparent.
Theperspective()functionacceptsasingleargument.Thisargumentmustbea
lengthgreaterthanzero.Negativevaluesareinvalid,andthetransformwillnotbe
applied.Lowervaluescreateamoreexaggeratedforeshorteningeffect,asyoucan
seeinFigure6.31.Inthisimage,thevalueofourtransformisperspective(10px)
rotate3d(1,1,1,-45deg).
(^9) http://dev.w3.org/csswg/css-transforms/#funcdef-perspective
CSS Transforms 253