Vizibilitate înapoi - CSS-Tricks

backface-visibilityProprietatea se referă la Transformări 3D. Cu transformările 3D, puteți reuși să rotiți un element, astfel încât ceea ce credem că este „fața” unui element să nu mai fie orientat spre ecran. De exemplu, acest lucru ar întoarce un element de pe ecran:

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

Va arăta ca și când ai fi luat-o cu o spatulă și l-ai întors ca o clătită. Asta pentru că implicit pentru backface-visibilityeste visible. În loc să fie vizibil, l-ai putea ascunde.

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

Exemplu simplu:

Vedeți Pen FjwGA de Chris Coyier (@chriscoyier) pe CodePen.

Acest lucru este util atunci când efectuați efecte 3D. De exemplu:

Funcționează corect

Față spate

Problemă în WebKit, deoarece vizibilitatea înapoi nu este ascunsă

Față spate

Acest lucru nu este problematic în Firefox, indiferent de motiv, deși proprietatea funcționează la fel.

Prefixe

Suport pentru Firefox 10+ și IE 10+ backface-visibilityfără prefix. Opera (post Blink, 15+), Chrome, Safari, iOS și Android au nevoie de toate -webkit-backface-visibility.

Valori

vizibil (implicit) - elementul va fi întotdeauna vizibil chiar și atunci când nu este orientat spre ecran.
ascuns - elementul nu este vizibil atunci când nu este orientat spre ecran.
moșteni - proprietatea își obține valoarea din elementul său părinte.
initial - seteaza proprietatea la valoarea implicita, care este visible.

Mai multe informatii

Tester 3D CSS
Spec
Documente Mozilla

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.