Vidnost v ozadju - CSS-triki | Almanah CSS 2025

backface-visibilityLastnina se nanaša na 3D transformacij. S 3D-preobrazbami lahko uspete zasukati element, tako da tisto, kar mislimo kot "sprednji del" elementa, ne bo več obrnjeno proti zaslonu. Tako bi na primer element oddaljil od zaslona:

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

Videti bo, kot da ste ga pobrali z lopatico in ga obrnili kot palačinko. To je zato, ker je privzeta za backface-visibilityje visible. Namesto da bi bil viden, bi ga lahko skril.

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

Preprost primer:

Oglejte si Pen FjwGA Chrisa Coyierja (@chriscoyier) na CodePen.

To je uporabno pri 3D učinkih. Na primer:

Deluje pravilno

Spredaj zadaj

V WebKitu je težava, ker vidnost ozadja ni skrita

Spredaj zadaj

To v Firefoxu iz kakršnega koli razloga ni problematično, čeprav lastnost deluje enako.

Predpone

Podpora za Firefox 10+ in IE 10+ backface-visibilitybrez predpone. Potrebujejo Opera (post Blink, 15+), Chrome, Safari, iOS in Android -webkit-backface-visibility.

Vrednote

viden (privzeto) - element bo vedno viden, tudi če ni obrnjen proti zaslonu.
skrit - element ni viden, če ni obrnjen proti zaslonu.
dedujte - lastnost will dobi vrednost iz nadrejenega elementa.
začetno - nastavi lastnost na privzeto vrednost, ki je visible.

Več informacij

3D CSS Tester
Spec
Mozilla Docs

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.