Vidljivost na stražnjoj strani - CSS-trikovi

backface-visibilityImovine odnosi se na 3D transformacije. Pomoću 3D transformacija možete uspjeti rotirati element tako da ono što mi smatramo "prednjom stranom" elementa više ne bude okrenuto prema zaslonu. Na primjer, ovo bi odbacilo element sa zaslona:

.flip ( transform: rotateY(180deg); )

Izgledat će kao da ste ga uzeli lopaticom i prevrnuli poput palačinke. To je zato što je zadano za backface-visibilityje visible. Umjesto da bude vidljivo, mogli biste ga sakriti.

.flip ( transform: rotateY(180deg); backface-visibility: hidden; )

Jednostavan primjer:

Pogledajte Pen FjwGA Chrisa Coyiera (@chriscoyier) na CodePenu.

Ovo je korisno kada se rade 3D efekti. Na primjer:

Radi ispravno

Prednja leđa

Problematično u WebKitu jer vidljivost pozadine nije skrivena

Prednja leđa

To iz bilo kojeg razloga u Firefoxu nije problematično, iako svojstvo funkcionira na isti način.

Prefiksi

Podrška za Firefox 10+ i IE 10+ backface-visibilitybez prefiksa. Potrebni su Opera (post Blink, 15+), Chrome, Safari, iOS i Android -webkit-backface-visibility.

Vrijednosti

vidljiv (zadano) - element će uvijek biti vidljiv čak i kad nije okrenut prema zaslonu.
skriven - element nije vidljiv ako nije okrenut prema zaslonu.
naslediti - svojstvo will dobiva vrijednost od nadređenog elementa.
početno - postavlja svojstvo na zadani, koji je visible.

Više informacija

3D CSS Tester
Spec
Mozilla dokumenti

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.