backface-visibility
Vara 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-visibility
on 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 tagaWebKitis on problemaatiline, kuna tagapinna nähtavus pole peidetud
Ees tagaSee pole Firefoxis mingil põhjusel problemaatiline, kuigi vara töötab samamoodi.
Eesliited
Firefox 10+ ja IE 10+ toe backface-visibility
ilma 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 * |