Synlighed på bagsiden - CSS-tricks

Anonim

Den backface-visibilityegenskab angår 3D transformationer. Med 3D-transformationer kan du klare at rotere et element, så det, vi tænker på som "fronten" på et element, ikke længere vender mod skærmen. For eksempel ville dette vende et element væk fra skærmen:

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

Det ser ud som om du har plukket den op med en spatel og vendt den om som en pandekage. Det er fordi standard for backface-visibilityer visible. I stedet for at det er synligt, kan du skjule det.

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

Enkelt eksempel:

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

Dette er nyttigt, når du laver 3D-effekter. For eksempel:

Fungerer korrekt

Foran bagpå

Problematisk i WebKit, fordi synlighed på bagsiden ikke er skjult

Foran bagpå

Dette er ikke problematisk i Firefox af en eller anden grund, selvom ejendommen fungerer på samme måde.

Præfikser

Firefox 10+ og IE 10+ support backface-visibilityuden præfiks. Opera (post Blink, 15+), Chrome, Safari, iOS og Android har alle brug for -webkit-backface-visibility.

Værdier

  • synlig (standard) - elementet vil altid være synligt, selv når det ikke vender mod skærmen.
  • skjult - elementet er ikke synligt, når det ikke vender mod skærmen.
  • arve - ejendommen får sin værdi fra det overordnede element.
  • initial - indstiller ejendommen til dens standard, som er visible.

Mere information

  • 3D CSS Tester
  • Spec
  • Mozilla Docs

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
12 * 10 * 11 12 4 *

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 3 * 3,2 *