CSS Master

Creating Depth with the perspectiveProperty Inordertomakea3D-transformedobjectlooklikeit’sactuallysittinginathree- dimensionalsp ...

Figure 6.36. A group of transformed elements nested within a container with perspective: 500px Largervalues,ontheotherhand,makee ...

Figure 6.37. A group of transformed elements nested within a container with perspective: 2000px Modifying the Point of View with ...

Figure 6.38. An example of drawing in perspective, with the red dot as our vanishing point AsyoucanseeinFigure6.39,therectangles ...

Figure 6.39. In this example, boxes appear smaller and further away as they get closer to the vanishing point Thisisessentiallyh ...

Figure 6.40. A containing element with perspective-origin: -50% -50% Aswithtransform-origin,theinitialvalueofperspective-origini ...

Here’sthecounterintuitivepart:transformandperspectivealsotriggerthisflat- teningwhentheirvalueissomethingotherthannone.Ineffect, ...

Figure 6.41. Elements with a transform-style value of flat Toworkaroundthis,wesetthevalueoftransform-styletopreserve-3d.Let’s up ...

height: 200px; } .wrapper figure:first-child { transform: rotateY(60deg) translateZ(191px); background: #3f51b5; } .wrapper figu ...

Figure 6.42. Elements with a transform-style value of preserve-3d Inthevastmajorityofcases,youshouldusetransform-style: preserve ...

Showing Both Faces with the backface-visibility Property Bydefault,thebackfaceofanelementisamirrorimageofitsfrontface.With stack ...

06-transforms/backface-visibility-card.html (excerpt) <div class="card"> <div class="side front"> <div class="sui ...

transform: rotateY(180deg); } .back { background: rgba(204, 204, 204, 0.8); } .suit { line-height: 1; text-align: center; font-s ...

Bothsidesofthecardarevisibleatthesametime.Let’sreviseourCSSslightly. We’lladdbackface-visibility: hiddentoour.sideruleset: .side ...

Figure 6.45. Flipping our card Figure6.46showstwocardsbeforebeingflipped.Thecardonthelefthasaback- face-visibilityvalueofhidden, ...

Figure 6.46. Two cards prior to flipping AndinFigure6.47,wecanseethesesamecardsaftertheflippedclassisadded; thatis,. Figure 6.47 ...

Conclusion Whew!Thatwasalottotakein.Ihopeafterreadingthischapter,you'velearned howto: ■ effectpagelayoutandstackingorderwithtran ...

Chapter 7 Applying CSS Conditionally 7. Applying CSS Conditionally Asitsnamesuggests,conditionalCSSreferstoCSSrulesthatareapplie ...

widespread.Browsersupportfor@supports(andtheCSS.supportsJavaScriptAPI) isalittlepatchier,butit'sstillsupportedwidelyenoughtobedi ...

mediaqueryconditions.ThatinterfaceisdefinedbytheCSSOM-ViewModule,^8 coveredinthe"UsingmediaquerieswithJavaScript"sectionlater. T ...