Hallo semua sahabat Dumet, pada artikel ini saya akan membuat layer 3D dengan efek hover. Sebelumnya saya telah membahas artikel tentang Cara Membuat Tombol 3D dengan HTML dan CSS. Efek 3D layer ini dapat digunakan pada website yang banyak menampilkan animasi.Berikut ini langkah demi langkah yang bisa kalian ikutin.
Pertama buat dulu file HTML nya, ketikan seperti contoh dibawah ini,
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Layer Card Efek Hover dengan HTML dan CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <img src="play.jpg"> <img src="play.jpg"> <img src="play.jpg"> <img src="play.jpg"> <img src="play.jpg"> </div> </body> </html> |
selanjutnya jangan lupa membuat file CSS seperti dibawah ini, dan simpan file beri nama style.css
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
body{ padding:0; margin:0; height: 100vh; display: flex; align-items: center; justify-content: center; width: 100%; } .container{ position: relative; width: 300px; height: 450px; background: rgba(36,242,211,1); transform: rotate(-20deg) skewX(15deg); transition: 0.5s; } .container img{ position: absolute; width: 100%; transition: 0.5s; } .container:hover img:nth-child(1){ transform: translate(-120px, 120px); opacity: .4; } .container:hover img:nth-child(2){ transform: translate(-90px, 90px); opacity: .6; } .container:hover img:nth-child(3){ transform: translate(-60px, 60px); opacity: .8; } .container:hover img:nth-child(4){ transform: translate(-30px, 30px); opacity: 1; } |
Selanjutnya jalankan pada browser kalian ,lalu lihat apa yang terjadi dan hasil akan menarik.
efek yang terjadi adalah saat di arahkan dengan cursor, dengan efek layar menumpuk sesuai jumlah image yang diberikan,hehe cukup simple kan sahabat dumet, silahkan coba di rumah bagaimana cara membuat layer 3D dengan html dan css, semoga bermanfaat,
terimakasih.