Taustapinnan näkyvyys - CSS-temppuja

backface-visibilityOminaisuus liittyy 3D-muunnoksia. 3D-muunnosten avulla voit hallita elementin kiertämistä niin, että mitä ajattelemme elementin "etupuoleksi", ei enää kohdistu näyttöön. Esimerkiksi tämä kääntäisi elementin pois näytöltä:

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

Näyttää siltä, että otit sen lastalla ja käännit sen kuin pannukakku. Tämä johtuu siitä, että oletuksena backface-visibilityon visible. Sen sijaan, että se olisi näkyvissä, voit piilottaa sen.

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

Yksinkertainen esimerkki:

Katso Chris Coyierin (@chriscoyier) Pen FjwGA -kynä CodePenistä.

Tämä on hyödyllistä 3D-tehosteita tehtäessä. Esimerkiksi:

Toimii oikein

Etupuoli takapuoli

Ongelma WebKitissä, koska takapinnan näkyvyyttä ei ole piilotettu

Etupuoli takapuoli

Tämä ei ole ongelmallista Firefoxissa jostain syystä, vaikka omaisuus toimii samalla tavalla.

Etuliitteet

Firefox 10+ ja IE 10+ -tuki backface-visibilityilman etuliitettä. Opera (Blink, 15+), Chrome, Safari, iOS ja Android tarvitsevat kaikki -webkit-backface-visibility.

Arvot

näkyvä (oletus) - elementti on aina näkyvissä myös silloin, kun se ei ole näyttöä vasten.
piilotettu - elementti ei ole näkyvissä, kun se ei ole näyttöä vasten.
peri - ominaisuus saa arvon sen emoelementiltä.
initial - asettaa ominaisuuden oletusarvoksi, joka on visible.

Lisää tietoa

3D CSS -testeri
Spec
Mozilla Docs

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.