backface-visibilityNuosavybė susijusi su 3D transformacijas. Naudodami 3D transformacijas, galite valdyti elemento pasukimą, kad tai, ką mes galvojame apie elemento „priekį“, nebebūtų nukreipta į ekraną. Pavyzdžiui, tai apvers elementą nuo ekrano:
.flip ( transform: rotateY(180deg); )Atrodys, tarsi pasiėmėte mentele ir apvertėte kaip blyną. Taip yra todėl, kad numatytasis parametras backface-visibilityyra visible. Užuot matę, galite jį paslėpti.
.flip ( transform: rotateY(180deg); backface-visibility: hidden; )Paprastas pavyzdys:
Žr. Chriso Coyierio (@chriscoyier) „Pen FjwGA“ „CodePen“.
Tai naudinga atliekant 3D efektus. Pavyzdžiui:
Veikia tinkamai
Priekinė galinė dalis„WebKit“ problemiška, nes nėra paslėptas galinės dalies matomumas
Priekinė galinė dalisDėl kokių nors priežasčių „Firefox“ tai nėra problemiška, nors nuosavybė veikia taip pat.
Priešdėliai
„Firefox 10+“ ir „IE 10+“ palaiko backface-visibilitybe priešdėlio. Reikia „Opera“ („Blink“, 15 ir naujesnių versijų), „Chrome“, „Safari“, „iOS“ ir „Android“ -webkit-backface-visibility.
Vertybės
- matomas (numatytasis) - elementas visada bus matomas net ir nesukant į ekraną.
- paslėptas - elementas nematomas nesukant į ekraną.
- paveldėti - nuosavybė turės vertę iš pagrindinio elemento.
- pradinis - nustato numatytąją ypatybę, kuri yra
visible.
Daugiau informacijos
- 3D CSS testeris
- Spec
- „Mozilla Docs“
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |
