Galinio paviršiaus matomumas - CSS-gudrybės

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ė dalis

Dė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ą.