hallo teman-teman balik lagi pada tutorial Dumet School,kita belajar lagi yuk hehe, kalau pada artikel sebelumnya kita telah belajar tentang properties perspective pada CSS, bisa dilihat pada artikel saya sebelumnya.
nah pada kesempatan ini kita akan belajar bagaimana cara membuat efek flip dengan hover effect dan properties perspective CSS. Oke kita langsung saja praktek, silahkan buat sebuah file dan ketikan script berikut :
<!DOCTYPE html> <html> <head> </head> <body> <div id="div-luar"> <div id="div-dalam">Dumet School</div> </div> </body> </html>
Nah sekarang kita akan atur CSS-nya:
<style>
#div-luar {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 15px;
border: 1px solid black;
perspective: 100px;
}
#div-dalam {
padding: 30px;
position: absolute;
border: 1px solid black;
background-color: #0C9D58;
transition:2s;
}
#div-dalam:hover{
transform: rotateX(140deg);
}
</style>
Jadi saya mengatur 2 buah div dimana ketika div yang berada di dalam di hover maka akan terputar karena adanya efek transform rotate sebanyak 140deg dimana pada kondisi awalnya adalah 0, dan coba jalankan pada browser lalu hover pada bagian kotak yang didalam yang berwarna hijau, lihat apa yang terjadi.
#NOTE : Untuk teman-teman yang belum faham apa fungsi perspective, cobalah teman-teman hapus style perspective di atas,lihat perbedaannya ketika kalian hover.
Oke cukup sekian dulu, selamat mencoba, semoga bermanfaat.
Terimakasih .