Penglihatan bahagian belakang - Trik CSS

The backface-visibilityharta berkaitan dengan jelmaan 3D. Dengan transformasi 3D, anda dapat memutar elemen sehingga apa yang kita fikirkan sebagai "depan" elemen tidak lagi menghadap ke layar. Contohnya, ini akan menjauhkan elemen dari layar:

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

Ia akan kelihatan seolah-olah anda mengambilnya dengan spatula dan membalikkannya seperti pancake. Ini kerana lalai untuk backface-visibilityadalah visible. Daripada ia kelihatan, anda boleh menyembunyikannya.

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

Contoh mudah:

Lihat Pen FjwGA oleh Chris Coyier (@chriscoyier) di CodePen.

Ini berguna semasa melakukan kesan 3D. Contohnya:

Berfungsi dengan betul

Depan belakang

Bermasalah dalam WebKit kerana jarak pandang belakang tidak tersembunyi

Depan belakang

Ini tidak bermasalah di Firefox dengan alasan apa pun, walaupun harta tanah berfungsi dengan cara yang sama.

Awalan

Sokongan Firefox 10+ dan IE 10+ backface-visibilitytanpa awalan. Opera (post Blink, 15+), Chrome, Safari, iOS, dan Android semuanya memerlukan -webkit-backface-visibility.

Nilai

kelihatan (lalai) - elemen akan sentiasa kelihatan walaupun tidak menghadap ke skrin.
tersembunyi - elemen tidak dapat dilihat apabila tidak menghadap ke skrin.
mewarisi - harta itu akan mendapat nilainya dari elemen induknya.
awal - menetapkan harta menjadi lalai, iaitu visible.

Maklumat lanjut

Penguji CSS 3D
Spesifikasi
Dokumen Mozilla

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.