Membuat Efek Flip Card 3D Website
Hai sobat, kali ini saya akan membuat efek Flip Card 3D keren, bisa digunakan untuk halaman profile di blog atau website kalian. Cara membuatnya juga simple dan mudah hanya menggunakan style CSS dan HTML saja. Oke dari pada kelamaan baca ini text langsung aja kalian ikuti langkah-langkah dibawah ini guys :
Langkah awal seperti biasa kita buat terlebih dahulu file dasarnya yaitu HTML kemudian tinggal kalian copy and paste kan source code dibawah ini :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
</head>
<body>
<div class="card middle">
<div class="front">
<img src="img.jpg" alt="">
</div>
<div class="back">
<div class="back-content middle">
<span>Youtube</span>
<h2>Sudutkom Channel</h2>
<div class="icon">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>
Setelah selesai dengan file HTML langsung lanjut ya ke pembuatan efek animasi Flip Cardnya di pada bagian CSS dan copy paste source code di bawah ini guys:
*{
margin: 0;
padding: 0;
text-decoration: none;
font-family: "montserrat";
}
body{
background: rgb(39, 38, 38);
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.card{
cursor: pointer;
width: 340px;
height: 480px;
}
.front,.back{
width: 100%;
height: 100%;
overflow: hidden;
backface-visibility: hidden;
position: absolute;
transition: transform 0.8s linear;
}
.front img{
height: 100%;
}
.front{
transform: perspective(600px) rotateY(0deg);
}
.back{
background: #f1f1f1;
transform: perspective(600px) rotateY(180deg);
}
.back-content{
color: #4e4e4e;
text-align: center;
width: 100%;
}
.icon{
margin: 20px 0;
}
.icon a{
display: inline-flex;
width: 50px;
height: 50px;
justify-content: center;
align-items: center;
color: #4e4e4e;
font-size: 18px;
transition: 0.4s;
border-radius: 20%;
}
.icon a:hover{
background: #4e4e4e;
color: white;
}
.card:hover > .front{
transform: perspective(600px) rotateY(180deg);
}
.card:hover > .back{
transform: perspective(600px) rotateY(0deg);
Oke sekian artikel dari saya kali ini guys semoga bermanfaat dan dapat di terapkan pada website ataupun blog kalian untuk video tutorialnya bisa kalian tonton di halaman Youtube di bagian menu. Sampai jumpa di artikel selnajutnya, terima kasih.
0 Response to "Membuat Efek Flip Card 3D Website"
Post a Comment