Den backface-visibilityegenskapen er relatert til 3D-transformasjoner. Med 3D-transformasjoner kan du klare å rotere et element, så det vi tenker på som "fronten" på et element ikke lenger vender mot skjermen. For eksempel vil dette snu et element vekk fra skjermen:
.flip ( transform: rotateY(180deg); )Det vil se ut som om du tok den opp med en slikkepott og snudde den som en pannekake. Det er fordi standard for backface-visibilityer visible. I stedet for at det er synlig, kan du skjule det.
.flip ( transform: rotateY(180deg); backface-visibility: hidden; )Enkelt eksempel:
Se Pen FjwGA av Chris Coyier (@chriscoyier) på CodePen.
Dette er nyttig når du gjør 3D-effekter. For eksempel:
Fungerer ordentlig
Bak fremProblematisk i WebKit fordi synlighet på baksiden ikke er skjult
Bak fremDette er ikke problematisk i Firefox av en eller annen grunn, selv om eiendommen fungerer på samme måte.
Prefikser
Firefox 10+ og IE 10+ støtter backface-visibilityuten prefiks. Opera (innlegg Blink, 15+), Chrome, Safari, iOS og Android trenger alle -webkit-backface-visibility.
Verdier
- synlig (standard) - elementet vil alltid være synlig selv når det ikke vender mot skjermen.
- skjult - elementet er ikke synlig når det ikke vender mot skjermen.
- arve - eiendommen vil få verdien fra det overordnede elementet.
- initial - setter egenskapen til standard, som er
visible.
Mer informasjon
- 3D CSS Tester
- Spes
- Mozilla Docs
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |