Skip to content

Commit f790cef

Browse files
aayush105aayush105
authored
Merge pull request #949 from KrishLalakiya/master
Fixed 3D Flipping Card Component animation stutter and Closes #948
2 parents 88b8db3 + f9ad4f2 commit f790cef

File tree

2 files changed

+36
-28
lines changed

2 files changed

+36
-28
lines changed

‎3D Flipping Card Component/index.html‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,38 +10,40 @@
1010

1111
<body>
1212
<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>
13+
<div class="card-wrapper">
14+
<div class="container">
15+
<div class="card front-face">
16+
<header>
17+
<span class="logo">
18+
<img src="images/logo.png" alt="">
19+
<h5>mastercard</h5>
20+
</span>
21+
<img src="images/chip.png" alt="" class="chip">
22+
</header>
2223

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>
24+
<div class="card-details">
25+
<div class="name-number">
26+
<h6>Card Number</h6>
27+
<div class="number">1000 2000 0002 0001</div>
28+
<div class="name">Ayush Agrawal</div>
29+
</div>
2930

30-
<div class="valid-date">
31-
<div class="validity">
32-
<h6>VALID</h6>
33-
<h6>THRU</h6>
31+
<div class="valid-date">
32+
<div class="validity">
33+
<h6>VALID</h6>
34+
<h6>THRU</h6>
35+
</div>
36+
<div class="date">08/26</div>
3437
</div>
35-
<div class="date">08/26</div>
3638
</div>
3739
</div>
38-
</div>
3940

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>
41+
<div class="card back-face">
42+
<h6>For customer service call +977 4343 3433 or email at [email protected]</h6>
43+
<span class="magnetic-strip"></span>
44+
<div class="signature"><i>056</i></div>
45+
<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>
46+
</div>
4547
</div>
4648
</div>
4749
</section>

‎3D Flipping Card Component/style.css‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,22 @@ section::after {
3939
transform: translate(150px, 100px);
4040
}
4141

42-
.container {
42+
.card-wrapper {
4343
height: 230px;
4444
width: 380px;
4545
position: relative;
4646
z-index: 10;
47+
}
48+
49+
.container {
50+
height: 100%;
51+
width: 100%;
52+
position: relative;
4753
transition: 0.6s;
4854
transform-style: preserve-3d;
4955
}
5056

51-
.container:hover{
57+
.card-wrapper:hover .container {
5258
transform: rotateY(180deg);
5359
}
5460

0 commit comments

Comments
 (0)