Arka yüz görünürlüğü - CSS Hileleri

backface-visibilityMülkiyet 3D dönüşümler ile ilgilidir. 3B dönüştürmelerle, bir öğeyi döndürmeyi başarabilirsiniz, böylece bir öğenin "önü" olarak düşündüğümüz şey artık ekrana bakmaz. Örneğin, bu bir öğeyi ekrandan uzaklaştırır:

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

Sanki bir spatula ile alıp gözleme gibi ters çevirmişsiniz gibi görünecek. Bunun nedeni için varsayılan değer backface-visibilityolmasıdır visible. Görünür olmak yerine, onu gizleyebilirsiniz.

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

Basit örnek:

CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen FjwGA'ya bakın.

Bu, 3B efektler yaparken kullanışlıdır. Örneğin:

Düzgün çalışır

Ön arka

WebKit'te sorunlu çünkü arka yüz görünürlüğü gizli değil

Ön arka

Bu, özellik aynı şekilde çalışsa da, herhangi bir nedenle Firefox'ta sorunlu değildir.

Ön ekler

backface-visibilityÖnek olmadan Firefox 10+ ve IE 10+ desteği . Opera (Blink sonrası, 15+), Chrome, Safari, iOS ve Android'in hepsi gerekir -webkit-backface-visibility.

Değerler

görünür (varsayılan) - öğe ekrana bakmadığında bile her zaman görünür olacaktır.
gizli - ekrana bakmadığında öğe görünmez.
miras alma - özellik, değerini üst öğesinden alır.
ilk - özelliği varsayılan değerine ayarlar visible.

Daha fazla bilgi

3D CSS Test Cihazı
Teknik Özellikler
Mozilla Belgeleri

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.