Membuat Efek Flip 3D dengan Hover Effect dan Properties Perspective CSS
hallo teman-teman balik lagi di panduan Source Code Aplikasi,kita belajar lagi yuk hehe, kalau di artikel sebelumnya kita telah belajar mengenai properties perspective di CSS, dapat dilihat di artikel saya sebelumnya.
nah di artikel ini kita akan belajar bagaimana cara merancang efek flip dengan hover effect dan properties perspective CSS. Oke kita seketika saja praktek, silahkan bikin sebuah file dan ketikan script berikut :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id=div-luar>
<div id=div-dalam>Source Code Aplikasi</div>
</div>
</body>
</html>
Nah kini 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 pada di hover karenanya akan terputar karena adanya efek transform rotate sebanyak 140deg dimana di kondisi awalnya yaitu 0, dan coba jalankan di browser lalu hover di bagian kotak yang didalam yang berwarna hijau, lihat apa yang terjadi.
#NOTE : Bagi teman-teman yang belum faham apa manfaat perspective, cobalah teman-teman hapus style perspective di atas,lihat perbedaannya ketika kalian hover.
Oke lumayan demikian dulu, selamat mencoba, semoga bermanfaat.
Terimakasih .
Sumber https://kursuswebsite.org
