CSS Master

Showing Both Faces with the backface-visibility Property

Bydefault,thebackfaceofanelementisamirrorimageofitsfrontface.With

stackedoroverlappingelements,thereversesideisalwaysvisibletotheviewer,

regardlessofwhichsidesitsatthetopofthestack.

Sometimes,however,wedon’twantthisbacksidetobevisible.Let’sreturntothe

cardmetaphormentionedintheintroductiontothischapter.Thistimewe’llusea

playingcard,seeninFigure6.43.Withanycard,weonlywantonesidetobevisible

totheuseratatime.Tomanagethevisibilityofanobject’sbackside,wecanuse

thebackface-visibilityproperty.

Figure 6.43. With cards, we only want to see one side at a time

Theinitialvalueofbackface-visibilityisvisible.Rearfaceswillalwaysbe

shown.Butifwewanttohideavisiblebackface,wecanusebackface-visibility:

hiddeninstead.

Let’screateourplayingcard.FirstourHTML:

270 CSS Master