Synlighet på baksidan - CSS-tricks

Den backface-visibilityegenskapen avser 3D transformer. Med 3D-omvandlingar kan du lyckas rotera ett element så att det vi tänker som "framsidan" av ett element inte längre vetter mot skärmen. Till exempel skulle detta vända ett element bort från skärmen:

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

Det kommer att se ut som om du tog upp den med en spatel och vred den som en pannkaka. Det beror på att standardvärdet för backface-visibilityär visible. Istället för att det är synligt kan du dölja det.

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

Enkelt exempel:

Se Pen FjwGA av Chris Coyier (@chriscoyier) på CodePen.

Detta är användbart när du gör 3D-effekter. Till exempel:

Fungerar ordentligt

Fram bak

Problematisk i WebKit eftersom synligheten på baksidan inte är dold

Fram bak

Detta är inte problematiskt i Firefox av någon anledning, även om fastigheten fungerar på samma sätt.

Prefix

Firefox 10+ och IE 10+ stöd backface-visibilityutan prefix. Opera (post Blink, 15+), Chrome, Safari, iOS och Android behöver alla -webkit-backface-visibility.

Värden

synlig (standard) - elementet kommer alltid att vara synligt även när det inte vetter mot skärmen.
dolt - elementet syns inte när det inte vetter mot skärmen.
inherit - egenskapen får sitt värde från dess överordnade element.
initial - ställer in egenskapen till dess standard, vilket är visible.

Mer information

3D CSS-testare
Spec
Mozilla Docs

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.