Memahami Backface Visibility
21/10/2018 Maykhel David 2638 Website
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
No data.
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
