Selamat datang di blog staykoding, kali ini kita akan belajar bagaimana membuat flip card pada web yang nantinya card tersebut dapat berputar secara horizontal 180 derajat seperti ilustrasi gambar dibawah ini.
Langkah-langkah atau cara membuat flip card dengan html css
1. Siapkan bahan-bahannya terlebih dahulu, kamu bisa download dibawah ini. Didalamnya terdapat gambar / image yang akan kita gunakan dalam pembuatan flip card dengan html css kali ini
2. buat file html yang nama filenya terserah kamu mau namakan tentang apa. Kalau saya nama file htmlnya flip-card.html.
jangan lupa buat juga file cssnya ya dan kasi nama style.css, sudah tentu kita akan styling dengan css
3. Ketikan kode html dibawah ini tepat difile html yang kamu buat tadi
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Flip Card</title>
<link href="style-flip-card.css" rel="stylesheet"></link>
</head>
<body>
<div class="flip-container">
<div class="flip-inner-container">
<div class="flip-front">
<img alt="" src="img/People-1.jpg" />
</div>
<div class="flip-back">
<div class="profile-image">
<img alt="" src="img/People-2.jpg" />
<h2>Staykoding</h2>
<p>Web Developer</p>
</div>
</div>
</div>
</div>
</body>
</html>
4.Kemudian ketik juga kode css dibawah ini pada file css yang telah sobat buat tadi
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #fccdbc;
}
.flip-container {
width: 280px;
height: 380px;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
perspective: 1000px;
margin: 100px auto;
}
.flip-inner-container {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transition: transform 0.8s;
}
.flip-container:hover .flip-inner-container{
transform: rotateY(180deg);
cursor: pointer;
}
.flip-front , .flip-back {
position: absolute;
width: 100%;
height: 100%;
--webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
}
.flip-front {
background: white;
padding: 2px;
}
.flip-front img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.flip-back {
width: 280px;
height: 380px;
background: white;
transform: rotateY(180deg);
}
.flip-back .profile-image img {
width: 130px;
height: 130px;
border-radius: 50%;
border: 4px solid #fccdbc;
margin-top: 20px;
}
.flip-back p {
font-size: 13px;
font-weight: 500;
}
6. Terakhir coba buka file html tadi dengan cara klik kanan pada file html tersebut dan pilih Open atau Open width serta pilih web browser yang akan digunakan untuk melihat hasil dari kodingan kita tadi. Jika berhasil maka akan tampil seperti gambar di bawah ini.
Sekian artikel saya kali ini semoga bermanfaat ya sobat. Nantikan artikel saya yang lainnya mengenai seputar web design lainnya. See you and Thank you.
0 Komentar