Visibilitas ke belakang - Trik CSS

The backface-visibilityproperti berkaitan dengan transformasi 3D. Dengan transformasi 3D, Anda dapat mengatur untuk memutar elemen sehingga apa yang kami anggap sebagai "depan" elemen tidak lagi menghadap layar. Misalnya, ini akan membalikkan elemen dari layar:

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

Ini akan terlihat seperti Anda mengambilnya dengan spatula dan membaliknya seperti pancake. Itu karena default untuk backface-visibilityadalah visible. Alih-alih terlihat, Anda bisa menyembunyikannya.

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

Contoh sederhana:

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

Ini berguna saat melakukan efek 3D. Contohnya:

Bekerja dengan baik

Depan belakang

Bermasalah di WebKit karena visibilitas bagian belakang tidak tersembunyi

Depan belakang

Ini tidak menjadi masalah di Firefox karena alasan apa pun, meskipun propertinya bekerja dengan cara yang sama.

Awalan

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

Nilai

terlihat (default) - elemen akan selalu terlihat bahkan saat tidak menghadap layar.
tersembunyi - elemen tidak terlihat saat tidak menghadap layar.
mewarisi - properti akan mendapatkan nilainya dari elemen induknya.
inisial - menyetel properti ke default, yaitu visible.

Informasi Lebih Lanjut

Penguji CSS 3D
Spesifikasi
Mozilla Docs

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.