Properti backface-visibility menentukan apakah sisi “belakang” elemen yang ditransformasikan terlihat saat menghadap penampil.
Wajah belakang elemen biasanya memiliki latar belakang transparan, membiarkan, ketika terlihat, gambar cermin dari wajah depan ditampilkan.
Ini digunakan bersamaan dengan transformasi CSS ketika sebuah elemen diputar dalam ruang tiga dimensi sehingga wajah depannya tidak lagi menghadap ke layar, dan sebaliknya wajah belakangnya menghadapinya. Misalnya, menerapkan rotasi sekitar sumbu y 180 ° (misalnya) akan menyebabkan sisi belakang elemen menghadap ke penampil. Ini tidak berpengaruh pada transformasi dua dimensi.
Properti ini berguna ketika kalian menempatkan dua elemen secara berurutan, seperti halnya kalian akan membuat kartu bermain. Saat kartu dibalik, kalian tidak ingin konten wajah depan dapat terlihat melalui wajah belakang. Tanpa properti ini, elemen depan dan belakang dapat berpindah tempat pada saat animasi untuk membalik kartu. Ini juga berguna saat membuat kubus di ruang tiga dimensi. Lihat bagian Demo Langsung di bawah ini untuk contoh langsung.
Official Syntax
- Syntax:
backface-visibility: visible | hidden - Initial: visible
- Animatable: no
Values:
visible: Menunjukkan bahwa wajah belakang elemen terlihat, dan dengan demikian wajah depan menunjukkan melaluinya.
hidden: Menunjukkan bahwa wajah belakang tersembunyi dan oleh karena itu wajah depan tidak terlihat.
Contoh:
Dalam contoh ini, kami akan membuat contoh flip kartu menggunakan properti visibilitas backface. Markup terdiri dari sebuah wadah yang berisi dua elemen yang akan kita tumpuk satu sama lain, saling berhadapan. Kami akan menerapkan properti visibilitas backface ke dua elemen ini, dan kemudian ketika wadah melayang, kedua elemen akan diputar dalam ruang tiga dimensi, dengan demikian menunjukkan “sisi lain kartu”. Dalam demo langsung di bawah ini, Anda dapat melihat contoh ini secara langsung.
<div class="container">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
CSS dengan komentar yang menjelaskan setiap langkah adalah sebagai berikut:
.container {
/* general styles here... */
/* activate 3D space */
perspective: 800px;
}
.card {
/* general styles here... */
position: relative;
transition: all .4s linear;
/* allow child elements to be positioned in 3D space of their own */
transform-style: preserve-3d;
}
.face {
/* general styles go here... */
/* position faces absolutely so that they stack on top of each other */
position: absolute;
width: 100%;
height: 100%;
/* prevent the front face from showing through the back */
backface-visibility: hidden;
}
.back {
/* ... */
/* initially rotate the element in the back so that when the card is flipped, it faces the viewer */
transform: rotateY(180deg);
}
/* when the card is hovered, rotate it. This will allow the back face to face the viewer. */
.card:hover {
transform: rotateY(180deg);
}