3D Flip Birthday Card CSS

Hendradian Mei 25, 2024



Halo dan selamat datang di tutorial hari ini. Dalam tutorial hari ini kita akan belajar cara membuat kartu ucapan ulang tahun dengan efek flip hover 3D. Untuk membuat kartu 3D yang indah ini, kita hanya membutuhkan HTML dan CSS.


Kartu ucapan terdiri dari dua bagian utama. Yang pertama adalah bagian luar dan yang kedua adalah bagian dalam. Ketika pengguna mengarahkan kartu, kartu akan berputar beberapa derajat. Selain itu, halaman luar kartu akan terbuka. Dengan demikian, hal ini akan memperlihatkan halaman dalam kartu. Bagian luar terdiri dari kue CSS, sedangkan bagian dalam terdiri dari ucapan harapan.

Struktur Folder Proyek:
Sebelum kita melanjutkan ke penulisan kode yang sebenarnya, mari kita lihat struktur folder proyek. Folder proyek ini bernama "Birthday Card" (Kartu Ulang Tahun). Di dalam folder ini, kita memiliki dua file. Yang pertama adalah dokumen HTML dan yang kedua adalah stylesheet (CSS). Kita memberi nama file-file ini index.html dan style.css.

HTML:
Kita mulai dengan kode HTML. Silakan salin kode di bawah ini dan tempelkan ke dalam dokumen HTML Anda.

HTML terdiri dari sebuah div dengan kelas "card". Kartu ini membungkus semua elemen lain dari kartu tersebut. Kita memiliki dua div utama di dalam kartu ini. Yang pertama adalah div "outside" (luar) dan yang berikutnya adalah div "inside" (dalam).

Mari kita lihat terlebih dahulu div "outside". Div "outside" ini membungkus dua div di dalamnya. Mereka adalah div "front" (depan) dan "back" (belakang). Di dalam div "front" terdapat tag p dan beberapa div yang menciptakan bentuk kue.

Div "inside" hanya terdiri dari tag p dengan ucapan selamat beserta emoji.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Birthday Card</title>
<!-- Google Font-->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<div class="outside">
<div class="front">
<p>Happy Birthday</p>
<div class="cake">
<div class="top-layer"></div>
<div class="middle-layer"></div>
<div class="bottom-layer"></div>
<div class="candle"></div>
</div>
</div>
<div class="back"></div>
</div>
<div class="inside">
<p>Happy birthday hope you can grow older and understand all conditions and appreciate anything and more health for yourself :)</p>
<h1>&#127873;</h1>
</div>
</div>
</body>
</html>


CSS:

Sekarang, untuk memberikan gaya pada kartu dan menambahkan efek yang diperlukan, kita menggunakan CSS. Silakan salin kode yang disediakan di bawah ini dan tempelkan ke dalam dokumen CSS Anda.



* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #fdbf00;
}
.card {
width: 640px;
height: 400px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-perspective: 1200px;
perspective: 1200px;
transition: 1s;
}
.card:hover {
transform: rotate(-5deg);
}
.card:hover .outside {
transform: rotateY(-130deg);
}
.outside,
.inside {
height: 100%;
width: 50%;
position: absolute;
left: 50.1%;
}
.inside {
background: linear-gradient(to right, #e7e7e7, #ffffff 30%);
line-height: 3;
padding: 0 20px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
left: 50%;
}
.outside {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 1;
transform-origin: left;
transition: 2s;
cursor: pointer;
}
.front,
.back {
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateX(0deg);
}
.front {
background-color: #ffffff;
}
.back {
transform: rotateY(180deg);
background: linear-gradient(to left, #e7e7e7, #ffffff 30%);
}
.cake {
width: 100%;
position: absolute;
bottom: 30px;
}
.top-layer,
.middle-layer,
.bottom-layer {
height: 80px;
width: 240px;
background-repeat: repeat;
background-size: 60px 100px;
background-position: 28px 0;
background-image: linear-gradient(
transparent 50px,
#fedbab 50px,
#fedbab 60px,
transparent 60px
),
radial-gradient(circle at 30px 5px, #994c10 30px, #fcbf29 31px);
border-radius: 10px 10px 0 0;
position: relative;
margin: auto;
}
.middle-layer {
transform: scale(0.85);
top: 6px;
}
.top-layer {
transform: scale(0.7);
top: 26px;
}
.candle {
height: 45px;
width: 15px;
background: repeating-linear-gradient(
45deg,
#fd3018 0,
#fd3018 5px,
#ffa89e 5px,
#ffa89e 10px
);
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 202px;
}
.candle:before {
content: "";
position: absolute;
height: 16px;
width: 16px;
background-color: #ffa500;
border-radius: 0 50% 50% 50%;
bottom: 48px;
transform: rotate(45deg);
left: -1px;
}
.outside p {
font-size: 23px;
text-transform: uppercase;
margin-top: 30px;
text-align: center;
letter-spacing: 6px;
color: #000046;
}
.inside h1 {
font-size: 120px;
line-height: 120px;
}

Kartu ulang tahun kita sekarang sudah siap. Anda bisa melanjutkan dan mengubah warna sesuai dengan keinginan dan kebutuhan Anda. Jika Anda mengalami masalah saat membuat kode ini, unduh sumbernya dengan mengklik tombol unduh.


Download Code


Tags
Hendradian

Diposting oleh Hendradian

Posting Komentar

0 Komentar