Hátlap láthatósága CSS-trükkök

A backface-visibilitytulajdonság 3D transzformációkra vonatkozik. A 3D transzformációkkal el tud forgatni egy elemet, így az, amit egy elem „elülső részének” gondolunk, már nem néz a képernyő felé. Például ez elfordítana egy elemet a képernyőről:

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

Úgy néz ki, mintha egy spatulával vetted volna fel, és úgy fordítottad volna át, mint egy palacsintát. Ennek oka, hogy az alapértelmezett backface-visibilityvan visible. Ahelyett, hogy látható lenne, elrejtheti.

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

Egyszerű példa:

Lásd Chris Coyier (@chriscoyier) Pen FjwGA-ját a CodePen-en.

Ez hasznos 3D-effektusok készítésekor. Például:

Megfelelően működik

Eleje hátulja

Problémás a WebKitben, mert a háttérfelület láthatósága nincs elrejtve

Eleje hátulja

Ez bármilyen okból nem okoz problémát a Firefoxban, bár a tulajdonság ugyanúgy működik.

Előtagok

A Firefox 10+ és az IE 10+ támogatja backface-visibilityelőtag nélkül. Az Operának (Blink, 15+), Chrome-nak, Safari-nak, iOS-nek és Android-nak mind szükséges -webkit-backface-visibility.

Értékek

látható (alapértelmezett) - az elem akkor is látható lesz, ha nem néz a képernyő felé.
rejtett - az elem nem látható, ha nem néz a képernyő felé.
örökölni - a tulajdonság értékét a szülő elemtől kapja meg.
kezdeti - a tulajdonságot az alapértelmezettre állítja, ami visible.

Több információ

3D CSS tesztelő
Spec
Mozilla Docs

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.