Tagapinna nähtavus - CSS-trikid

Lang L: none (table-of-contents)

backface-visibilityVara käsitleb 3D teisendused. 3D-teisenduste abil saate elementi pöörata nii, et see, mida me peame elemendi „esiosaks“, ei oleks enam ekraanile suunatud. Näiteks libistaks see elemendi ekraanilt eemale:

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

Tundub, nagu oleksite selle spaatliga üles korjanud ja pööranud nagu pannkook. Seda seetõttu, et vaikeväärtus backface-visibilityon visible. Selle asemel, et see oleks nähtav, võiksite selle varjata.

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

Lihtne näide:

Vaadake Chris Coyieri (@chriscoyier) Pen FjwGA-d CodePenis.

See on kasulik 3D-efektide tegemisel. Näiteks:

Töötab korralikult

Ees taga

WebKitis on problemaatiline, kuna tagapinna nähtavus pole peidetud

Ees taga

See pole Firefoxis mingil põhjusel problemaatiline, kuigi vara töötab samamoodi.

Eesliited

Firefox 10+ ja IE 10+ toe backface-visibilityilma prefiksita. Opera (postitus Blink, 15+), Chrome, Safari, iOS ja Android vajavad kõiki -webkit-backface-visibility.

Väärtused

  • nähtav (vaikimisi) - element on alati nähtav ka siis, kui see pole ekraanile suunatud.
  • peidetud - elementi pole ekraanile vaadates nähtav.
  • pärima - omadus saab oma väärtuse oma vanemelemendilt.
  • esialgne - määrab atribuudi vaikimisi, mis on visible.

Rohkem informatsiooni

  • 3D CSS-i tester
  • Spetsifikatsioon
  • Mozilla dokumendid

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

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

Mobiil / tahvelarvuti

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

Huvitavad Artiklid...