v2.5.1
Giriş yap

CSS backface-visibility Özelliği

CSS3

Etiketin arka yüzünün görünür olup olmadığı belirlenir.

Yapısı (Syntax)backface-visibility: visible | hidden | initial | inherit;
NOT
Etiketin arka yüzünü göstermek için transform özelliğinin rotateY() fonksiyonu kullanılır. Bu gibi durumda arka yüzün gözüküp gözükmeyeceği bu özellik sayesinde belirlenir.
Varsayılan Değer visible
JavaScript Yapısı object.style.backfaceVisibility="hidden"
Animasyon Özellikleri Uygulanabilir Hayır (Daha fazla detay)

Değerler

Değer Açıklama Versiyon
visible Varsayılan değerdir. Ve arka yüzü görünür kılar. CSS3
hidden Arka yüzü gizler. CSS3
initial Varsayılan ayarlarına geri döndürür. CSS3
inherit Özelliği üst öğesinden miras alır. CSS3

Örnekler

İki kutu oluşturup birinin arka yüzünü görünür, diğerininkini gizli yapalım.

<div class="box"> 1. kutu</div>
<div class="box hide">2. kutu</div>

<style>
.box {
	width: 100px;
	height: 100px;
	background-color: blue;
	transform: rotateY(200deg); /* ters yüzüne döndürdük */
}
.box.hide {
	/* hide sınıfına sahip etiketin arka yüzünü gizledik */
	backface-visibility: hidden;
}
</style>

Tarayıcı Desteği

  Chrome Firefox Edge Internet Explorer Opera Safari
backface-visibility 36
-webkit-
16
-moz-
12
-webkit-
10 23
-webkit-
5.1
Destekliyor
Desteklemiyor
tayfunerbilen
322 gün önce eklendi - 1867 kez görüntülendi.
Github'da Düzenle
Önceki background-repeat Sonraki max-width