Aizmugures virsmas redzamība - CSS-triki

Anonim

backface-visibilityĪpašums ir saistīts ar 3D pārveidojumus. Izmantojot 3D transformācijas, jūs varat pārvaldīt elementa pagriešanu, lai tas, ko mēs domājam par elementa “priekšpusi”, vairs nebūtu vērsts pret ekrānu. Piemēram, tas pagrieztu elementu prom no ekrāna:

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

Izskatīsies tā, it kā jūs to paņemtu ar lāpstiņu un apgāztu kā pankūku. Tas ir tāpēc, ka noklusējuma vērtība backface-visibilityir visible. Tā vietā, lai tas būtu redzams, jūs to varētu paslēpt.

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

Vienkāršs piemērs:

Skatiet Kriss Koijers (@chriscoyier) Pen FjwGA vietnē CodePen.

Tas ir noderīgi, veicot 3D efektus. Piemēram:

Darbojas pareizi

Priekšpuse aizmugure

WebKit ir problemātiska, jo aizmugures virsmas redzamība nav paslēpta

Priekšpuse aizmugure

Jebkādu iemeslu dēļ Firefox tas nav problemātiski, lai gan īpašums darbojas tāpat.

Prefiksi

Firefox 10+ un IE 10+ atbalsts backface-visibilitybez prefiksa. Nepieciešama gan Opera (post Blink, 15+), gan Chrome, Safari, iOS un Android -webkit-backface-visibility.

Vērtības

  • redzams (noklusējums) - elements vienmēr būs redzams pat tad, ja tas nav vērsts pret ekrānu.
  • slēpts - elements nav redzams, ja tas nav vērsts pret ekrānu.
  • mantot - īpašums savu vērtību iegūst no vecāka elementa.
  • sākotnējais - iestata rekvizītu pēc noklusējuma, kas ir visible.

Vairāk informācijas

  • 3D CSS testeris
  • Spec
  • Mozilla Docs

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

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

Mobilais / planšetdators

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