CSS Master

Figure 6.10. The purple box has been rotated 55 degrees from its start position, shown by the dotted line

Therotate()functionacceptsvaluesinangleunits.Angleunitsaredefinedby

theCSSValuesandUnitsModuleLevel3.^6 Thesemaybedeg(degrees),rad(radi-

ans),grad(gradians),orturnunits.Onecompleterotationisequalto360deg,

6.28rad,400grad,or1turn.

Rotationvaluesthatexceedonerotation(say,540degor1.5turn)arerenderedac-

cordingtotheirremainderedvalue,unlessanimatedortransitioned.Inotherwords,

540degisrenderedthesameas180deg(540degreesminus 360 degrees)and1.5turn

isrenderedthesameas.5turn(1.5-1).However,atransitionoranimationfrom

0degto540degor1turnto1.5turnwillrotatetheelementone-and-a-halftimes.

2D Scaling Functions: scale, scaleX, and scaleY

Withthescalingfunctions,wecanincreaseordecreasetherenderedsizeofan

elementintheX-dimension(scaleX),Y-dimension(scaleY),orboth(scale).

ScalingisillustratedinFigure6.11,wheretheborderillustratestheoriginal

boundariesofthebox,andthe+marksitscenterpoint.

(^6) http://dev.w3.org/csswg/css-values-3/#angles
236 CSS Master