Skip to content

Commit 89f2e7c

Browse files
aayush105aayush105
authored
Merge pull request #597 from TheLearningHead/master
Added the 3D Flipping Card which flips upon hovering
2 parents 9657a60 + abd4a12 commit 89f2e7c

File tree

4 files changed

+232
-0
lines changed

4 files changed

+232
-0
lines changed

‎3D Flipping Card Component/images/chip.png

29.5 KB
Loading

‎3D Flipping Card Component/images/logo.png

5.14 KB
Loading

‎3D Flipping Card Component/index.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Flipping Card</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<section>
13+
<div class="container">
14+
<div class="card front-face">
15+
<header>
16+
<span class="logo">
17+
<img src="images/logo.png" alt="">
18+
<h5>mastercard</h5>
19+
</span>
20+
<img src="images/chip.png" alt="" class="chip">
21+
</header>
22+
23+
<div class="card-details">
24+
<div class="name-number">
25+
<h6>Card Number</h6>
26+
<div class="number">1000 2000 0002 0001</div>
27+
<div class="name">Ayush Agrawal</div>
28+
</div>
29+
30+
<div class="valid-date">
31+
<div class="validity">
32+
<h6>VALID</h6>
33+
<h6>THRU</h6>
34+
</div>
35+
<div class="date">08/26</div>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<div class="card back-face">
41+
<h6>For customer service call +977 4343 3433 or email at [email protected]</h6>
42+
<span class="magnetic-strip"></span>
43+
<div class="signature"><i>056</i></div>
44+
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique cum unde labore sed molestiae placeat molestias enim error praesentium, quo temporibus facilis rerum quos nesciunt? Libero doloremque natus consectetur. Animi libero magni numquam soluta nobis. Deserunt incidunt quos hic, nesciunt dolorum facere in, expedita, asperiores accusamus iusto amet quo ullam.</h5>
45+
</div>
46+
</div>
47+
</section>
48+
</body>
49+
50+
</html>

‎3D Flipping Card Component/style.css

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
font-family: "Poppins", sans-serif;
7+
box-sizing: border-box;
8+
}
9+
10+
section {
11+
position: relative;
12+
min-height: 100vh;
13+
width: 100%;
14+
background-color: #121321;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
color: white;
19+
perspective: 1000px;
20+
}
21+
22+
section::before {
23+
content: '';
24+
position: absolute;
25+
height: 240px;
26+
width: 240px;
27+
border-radius: 50%;
28+
background: linear-gradient(90deg, #9c27b0, #f3f5f5);
29+
transform: translate(-150px, -100px);
30+
}
31+
32+
section::after {
33+
content: '';
34+
position: absolute;
35+
height: 240px;
36+
width: 240px;
37+
border-radius: 50%;
38+
background: linear-gradient(90deg, #9c27b0, #f3f5f5);
39+
transform: translate(150px, 100px);
40+
}
41+
42+
.container {
43+
height: 230px;
44+
width: 380px;
45+
position: relative;
46+
z-index: 10;
47+
transition: 0.6s;
48+
transform-style: preserve-3d;
49+
}
50+
51+
.container:hover{
52+
transform: rotateY(180deg);
53+
}
54+
55+
.container .card {
56+
position: absolute;
57+
background-color: rgb(255, 255, 255, 0.1);
58+
height: 100%;
59+
width: 100%;
60+
backdrop-filter: blur(25px);
61+
border-radius: 30px;
62+
box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.25);
63+
border: 1px solid rgb(255, 255, 255, 0.1);
64+
padding: 25px;
65+
backface-visibility: hidden;
66+
}
67+
68+
.front-face .logo {
69+
display: flex;
70+
align-items: center;
71+
gap: 12px;
72+
}
73+
74+
.front-face header {
75+
display: flex;
76+
align-items: center;
77+
justify-content: space-between;
78+
}
79+
80+
.front-face .logo img {
81+
width: 50px;
82+
}
83+
84+
.front-face .logo h5 {
85+
font-size: 18px;
86+
font-weight: 400;
87+
}
88+
89+
.front-face .chip {
90+
width: 50px;
91+
}
92+
93+
.front-face .card-details {
94+
display: flex;
95+
justify-content: space-between;
96+
align-items: flex-end;
97+
margin-top: 50px;
98+
}
99+
100+
.name-number h6 {
101+
font-size: 10px;
102+
font-weight: 400;
103+
}
104+
105+
.name-number .number {
106+
font-size: 18px;
107+
font-weight: 400;
108+
}
109+
110+
.name-number .name {
111+
font-size: 16px;
112+
font-weight: 400;
113+
margin-top: 20px;
114+
}
115+
116+
.valid-date {
117+
display: flex;
118+
justify-content: center;
119+
align-items: center;
120+
gap: 4px;
121+
}
122+
123+
.valid-date .validity {
124+
line-height: 6px;
125+
}
126+
127+
.valid-date .validity h6 {
128+
font-size: 8px;
129+
}
130+
131+
.valid-date .date {
132+
font-size: 14px;
133+
}
134+
135+
.card.back-face {
136+
border: none;
137+
padding: 20px 25px 25px 25px;
138+
transform: rotateY(180deg);
139+
}
140+
141+
.back-face h6 {
142+
font-size: 8px;
143+
font-weight: 400;
144+
}
145+
146+
.back-face .magnetic-strip {
147+
position: absolute;
148+
top: 36px;
149+
left: 0px;
150+
height: 45px;
151+
width: 100%;
152+
background-color: black;
153+
}
154+
155+
.back-face .signature {
156+
margin-top: 60px;
157+
background: repeating-linear-gradient(white, white 3px, #bebebe 0px, #bebebe 9px);
158+
width: 85%;
159+
height: 30px;
160+
border-radius: 6px;
161+
position: relative;
162+
display: flex;
163+
align-items: center;
164+
justify-content: flex-end;
165+
}
166+
167+
.signature i {
168+
color: black;
169+
margin-right: -30px;
170+
font-size: 12px;
171+
font-weight: 500;
172+
background-color: white;
173+
padding: 4px 6px;
174+
border-radius: 4px;
175+
z-index: -1;
176+
}
177+
178+
.back-face h5 {
179+
font-size: 8px;
180+
font-weight: 400;
181+
margin-top: 15px;
182+
}

0 commit comments

Comments
 (0)