Transformscanbegroupedintotwocategories:2Dand3D.Eachgroupcontains
functionsforrotating,skewing,scaling,andtranslating.2Dfunctionsareconcerned
withtransformationsofpointsalongtheXandYaxes.3Dfunctionsaddthethird
dimensionofdepthandaffectpointsalongtheZ-axis.
2D Transform Functions
Two-dimensionaltransformfunctionsenjoythewidestbrowsersupport.They’re
supportedwithoutvendorprefixesinInternetExplorer10+,Firefox15+,Chrome
35+,andOpera23+.
Safari ≤ 8, UC Browser, and Android 4 (or earlier) require a -webkit-prefixforall
transforms.SodoolderversionsofChrome(4to35)andOpera(15to23).Firefox
versions 10 through 14 andolderrequirea-moz-prefix.SupportinInternetExplorer
9 isavailablewithan-ms-prefix,whileIE8doesnotsupporttransforms.
Aswe’vementioned,2DtransformsaffectpointsintheXandYdimensions.There
arefourprimaryfunctions:rotate,scale,skew,andtranslate.Therearealso
functionsthatletustransformanelementinonedimension:scaleXandscaleY;
skewXandskewY;andtranslateXandtranslateY.
rotate()
Arotationtransformspinsanelementarounditsoriginbytheanglespecifiedaround
thepointspecified.Usingrotate()tiltsanelementclockwise(positiveanglevalues)
orcounter-clockwise(negativeanglevalues).Itseffectismuchlikeawindmillor
pinwheel,asseeninFigure6.10.
CSS Transforms 235