Memahami Backface Visibility

Memahami Backface Visibility - Hallo teman - teman, kalian sedang belajar html dan css pasti mungkin beberapa dari kalian ada yang pernah melihat atau mendengar tentang backface-visibility.untuk kalian yang belum mengetahui tentang apa itu backface visibility, kalian wajib membaca artikel ini untuk membuat wawasan kalian tentang desain website bisa lebih luas. beberapa minggu lalu saya membuat sebuah artikel yang menggunakan backface visibility yang berjudul cara membuat website card flip artikel tersebut terbagi menjadi 3 part.

Sekarang ini kita akan membahas tentang backface visibility, backface-visibility memiliki 2 value utama yaitu visible dan hidden

backface-visibility.adalah sebuah property css yang berfungsi untuk menampilkan bagian belakan pada sebuah elemen, biasanya backface-visibility.akan dipadukan dengan fungsi css rotateX atau rotateY.

Contohnya saya akan membuat dua buah elemen dengan nama div1 dan div2,

Pada div1 saya akan berikan backface-visibility:hidden

Pada div1 saya akan berikan backface-visibility:visible

Dan keduanya akan saya berikan transform rotate 180 derajat

Kira- kira html tersebut akan seperti ini

<!DOCTYPE html>
<html>
<head>
<style>
div {
    position: relative;
    height: 60px;
    width: 60px;
    background-color: red;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#div1 {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#div2 {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}
</style>
</head>
<body>
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
</body>
</html>

maka yang akan terlihat hanyalah div dengan id #div2 saja karena sudah saya set visible, dan juga teks yang akan terlihat menjadi terbalik seperti ini

Baiklah teman teman cukup mudah bukan untuk memahami tentang backface visibility pada css3 jadi kalian bisa menggunakan css ini untuk memberikan efek memutar balik elemen dengan dipadukan juga menggunakan css transition.

Bemikian artikel kali ini yang membahas tentang memahami backface visibility pada css3. semoga bermanfaat