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
