CSS Master

dizzinessornauseaforpeoplewithvestibulardisorders,suchasvertigo^22 .Flashing animationscantriggerseizuresinsomepeoplewithphotose ...

Whenthesepropertiesareanimated,thebrowsermustrecalculatethesizeandpo- sitionoftheaffected—andoftenneighboring—elements.UseChapte ...

performanceandaccessibilityconcerns,andexplainedthefinerpointsofthecubic- bezierfunction. Asyouusetransitionsandanimations,consi ...

Chapter 6 CSS Transforms 6. CSS Transforms Transformsallowustocreateeffectsandinteractionsthatareotherwiseimpossible. Whencombin ...

Figure 6.1. Greetings from Hollywood^1 Apostcardisn’tawebinterface,obviously,butitisametaphorforthekindofin- terfacesthatwecancr ...

Figure 6.2. An example weather widget Figure 6.3. Our widget’s settings panel Card-styleinterfacesareagreatexampleofwhatwecanbui ...

The Current State of Transforms TransformsaredefinedbytheCSSTransformsspecification.^2 Atonepoint,two- dimensionalandthree-dimen ...

Table 6.2. Current browser support for 3D transforms Internet Opera Safari Android UC Browser Explorer Chrome Firefox 9+ (requir ...

forthechild.Iftheparentrectanglewasnotpositioned,thischildelementwould insteadbedrawnatthebottomrightofthebrowserwindow. Figure ...

1.Child-stackingcontextswithanegativestacklevel(forexample,positionedz- index: -1) 2.Nonpositionedelements 3.Child-stackingconte ...

Figure 6.6. A stacking context with positioned and unpositioned elements with varying z-index values Three-dimensionaltransforms ...

Transformsareappliedafterelementshavebeensizedandpositioned.Unlikefloated elements,transformedelementshavenoeffectoncontentflow. ...

Figure 6.7. A two-dimensional coordinate system Inathree-dimensionalcoordinatesystem,there’salsoaZ-axis.Thisaxisisperpen- dicula ...

Figure 6.8. A three-dimensional coordinate system ArenderedHTMLdocumentis,essentially,acoordinatesystem.Thetop-leftcorner istheo ...

Ifonevalueisspecified,thesecondvalueisassumedtobecenter,andthethird valueisassumedtobe0px. BoththeXandYcoordinatesmaybepercentag ...

Transformscanbegroupedintotwocategories:2Dand3D.Eachgroupcontains functionsforrotating,skewing,scaling,andtranslating.2Dfunction ...

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

Figure 6.11. A box (left) is scaled by a factor of 2 (right) Eachscalefunctionacceptsamultiplierorfactorasitsargument.Thismultip ...

Figure 6.12. An element at its original size (left) and with transform: scale(-2) applied Multipliers of Zero Usingscale(0)willc ...

itsoffsetLeftoroffsetToppositions.Itdoes,however,affectwhereit’svisually positionedonscreen. Each2Dtranslationfunction—translate ...