Skip to content

Commit 49c9831

Browse files
jamesmontemagnojamesmontemagno
committed
Add 3D flip animation to CardDeck component
- CSS transform with rotateY for smooth 3D flip - preserve-3d and backface-visibility for proper card faces - 0.6s cubic-bezier transition for satisfying flip feel
1 parent bc4ac0f commit 49c9831

2 files changed

Lines changed: 120 additions & 42 deletions

File tree

‎.solutions/finished/SocOps/Components/CardDeck.razor‎

Lines changed: 60 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,28 @@
1818

1919
<!-- Card Area -->
2020
<div class="flex-1 flex items-center justify-center p-6">
21-
<div class="w-full max-w-xs">
22-
<!-- Clickable Card -->
23-
<button
24-
@onclick="HandleCardTap"
25-
class="w-full bg-card rounded-2xl p-8 min-h-[320px] flex flex-col items-center justify-center text-center @(IsFlipped ? "neon-border-pink" : "neon-border")"
26-
disabled="@IsAllDone">
27-
@if (!IsFlipped)
28-
{
21+
<div class="w-full max-w-xs perspective-1000">
22+
<!-- Flippable Card Container -->
23+
<div class="card-flip @(IsFlipped ? "flipped" : "")" @onclick="HandleCardTap">
24+
<!-- Card Inner (holds both faces) -->
25+
<div class="card-flip-inner">
2926
<!-- Card Back - Tap to Reveal -->
30-
<div class="text-6xl mb-4">🎴</div>
31-
<p class="text-cyan font-display uppercase tracking-wider text-lg">TAP TO REVEAL</p>
32-
}
33-
else
34-
{
27+
<div class="card-face card-back bg-card rounded-2xl neon-border p-8 flex flex-col items-center justify-center">
28+
<div class="text-6xl mb-4">🎴</div>
29+
<p class="text-cyan font-display uppercase tracking-wider text-lg">TAP TO REVEAL</p>
30+
</div>
31+
3532
<!-- Card Front - Question -->
36-
<p class="text-xl font-semibold text-white mb-6 leading-relaxed">
37-
@CurrentQuestion
38-
</p>
39-
<p class="text-sm text-gray-500 font-display uppercase">
40-
Find someone who...
41-
</p>
42-
}
43-
</button>
33+
<div class="card-face card-front bg-card rounded-2xl neon-border-pink p-8 flex flex-col items-center justify-center text-center">
34+
<p class="text-xl font-semibold text-white mb-6 leading-relaxed">
35+
@CurrentQuestion
36+
</p>
37+
<p class="text-sm text-gray-500 font-display uppercase">
38+
Find someone who...
39+
</p>
40+
</div>
41+
</div>
42+
</div>
4443
</div>
4544
</div>
4645

@@ -133,3 +132,43 @@
133132
IsFlipped = false;
134133
}
135134
}
135+
136+
<style>
137+
.perspective-1000 {
138+
perspective: 1000px;
139+
}
140+
141+
.card-flip {
142+
width: 100%;
143+
height: 320px;
144+
cursor: pointer;
145+
}
146+
147+
.card-flip-inner {
148+
position: relative;
149+
width: 100%;
150+
height: 100%;
151+
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
152+
transform-style: preserve-3d;
153+
}
154+
155+
.card-flip.flipped .card-flip-inner {
156+
transform: rotateY(180deg);
157+
}
158+
159+
.card-face {
160+
position: absolute;
161+
width: 100%;
162+
height: 100%;
163+
backface-visibility: hidden;
164+
-webkit-backface-visibility: hidden;
165+
}
166+
167+
.card-back {
168+
transform: rotateY(0deg);
169+
}
170+
171+
.card-front {
172+
transform: rotateY(180deg);
173+
}
174+
</style>

‎.solutions/step-07-card-deck/SocOps/Components/CardDeck.razor‎

Lines changed: 60 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,28 @@
1818

1919
<!-- Card Area -->
2020
<div class="flex-1 flex items-center justify-center p-6">
21-
<div class="w-full max-w-xs">
22-
<!-- Clickable Card -->
23-
<button
24-
@onclick="HandleCardTap"
25-
class="w-full bg-card rounded-2xl p-8 min-h-[320px] flex flex-col items-center justify-center text-center @(IsFlipped ? "neon-border-pink" : "neon-border")"
26-
disabled="@IsAllDone">
27-
@if (!IsFlipped)
28-
{
21+
<div class="w-full max-w-xs perspective-1000">
22+
<!-- Flippable Card Container -->
23+
<div class="card-flip @(IsFlipped ? "flipped" : "")" @onclick="HandleCardTap">
24+
<!-- Card Inner (holds both faces) -->
25+
<div class="card-flip-inner">
2926
<!-- Card Back - Tap to Reveal -->
30-
<div class="text-6xl mb-4">🎴</div>
31-
<p class="text-cyan font-display uppercase tracking-wider text-lg">TAP TO REVEAL</p>
32-
}
33-
else
34-
{
27+
<div class="card-face card-back bg-card rounded-2xl neon-border p-8 flex flex-col items-center justify-center">
28+
<div class="text-6xl mb-4">🎴</div>
29+
<p class="text-cyan font-display uppercase tracking-wider text-lg">TAP TO REVEAL</p>
30+
</div>
31+
3532
<!-- Card Front - Question -->
36-
<p class="text-xl font-semibold text-white mb-6 leading-relaxed">
37-
@CurrentQuestion
38-
</p>
39-
<p class="text-sm text-gray-500 font-display uppercase">
40-
Find someone who...
41-
</p>
42-
}
43-
</button>
33+
<div class="card-face card-front bg-card rounded-2xl neon-border-pink p-8 flex flex-col items-center justify-center text-center">
34+
<p class="text-xl font-semibold text-white mb-6 leading-relaxed">
35+
@CurrentQuestion
36+
</p>
37+
<p class="text-sm text-gray-500 font-display uppercase">
38+
Find someone who...
39+
</p>
40+
</div>
41+
</div>
42+
</div>
4443
</div>
4544
</div>
4645

@@ -133,3 +132,43 @@
133132
IsFlipped = false;
134133
}
135134
}
135+
136+
<style>
137+
.perspective-1000 {
138+
perspective: 1000px;
139+
}
140+
141+
.card-flip {
142+
width: 100%;
143+
height: 320px;
144+
cursor: pointer;
145+
}
146+
147+
.card-flip-inner {
148+
position: relative;
149+
width: 100%;
150+
height: 100%;
151+
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
152+
transform-style: preserve-3d;
153+
}
154+
155+
.card-flip.flipped .card-flip-inner {
156+
transform: rotateY(180deg);
157+
}
158+
159+
.card-face {
160+
position: absolute;
161+
width: 100%;
162+
height: 100%;
163+
backface-visibility: hidden;
164+
-webkit-backface-visibility: hidden;
165+
}
166+
167+
.card-back {
168+
transform: rotateY(0deg);
169+
}
170+
171+
.card-front {
172+
transform: rotateY(180deg);
173+
}
174+
</style>

0 commit comments

Comments
 (0)