Weekend in Lisbon
Three days of tiles, tarts and trams.
Vertical Flip Card Hover
A business card that flips top over bottom to show the contact details, overshooting a little as it lands. The two-face flip card trick, turned on the X axis instead of Y.
Also known as: flip card top to bottom, rotateX flip card, business card flip.
AP
Ada Park
Product Designer
ada@studio.dev
+1 555 0142
studio.dev/ada
HTML
<div class="hfx-vertical-flip-card">
<div class="hfx-vertical-flip-card-inner">
<div class="hfx-vertical-flip-card-front">
<span class="hfx-vertical-flip-card-logo">AP</span>
<strong>Ada Park</strong>
<small>Product Designer</small>
</div>
<div class="hfx-vertical-flip-card-back">
<span>ada@studio.dev</span>
<span>+1 555 0142</span>
<span>studio.dev/ada</span>
</div>
</div>
</div>CSS
.hfx-vertical-flip-card {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
width: 14em;
height: 8em;
perspective: 40em;
font-family: system-ui, sans-serif;
}
.hfx-vertical-flip-card-inner {
position: relative;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.7s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.hfx-vertical-flip-card:hover .hfx-vertical-flip-card-inner {
transform: rotateX(-180deg);
}
.hfx-vertical-flip-card-front,
.hfx-vertical-flip-card-back {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.15em;
padding: 1em 1.2em;
border-radius: 0.8em;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.hfx-vertical-flip-card-front {
background: #fff;
border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
color: #111827;
}
.hfx-vertical-flip-card-front strong {
font-size: 1.15em;
}
.hfx-vertical-flip-card-front small {
font-size: 0.8em;
color: #6b7280;
}
.hfx-vertical-flip-card-logo {
position: absolute;
top: 1.2em;
left: 1.4em;
display: grid;
place-items: center;
width: 2.4em;
height: 2.4em;
border-radius: 0.6em;
background: var(--c);
color: #fff;
font-size: 0.85em;
font-weight: 800;
}
.hfx-vertical-flip-card-back {
justify-content: center;
gap: 0.4em;
background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 65%, #000));
color: #fff;
font-size: 0.9em;
transform: rotateX(180deg);
}
.hfx-vertical-flip-card-back span::before {
content: "";
display: inline-block;
width: 0.4em;
height: 0.4em;
margin-right: 0.6em;
border-radius: 50%;
background: color-mix(in srgb, #fff 70%, transparent);
vertical-align: 0.1em;
}
@media (prefers-reduced-motion: reduce) {
.hfx-vertical-flip-card, .hfx-vertical-flip-card *, .hfx-vertical-flip-card::before, .hfx-vertical-flip-card::after, .hfx-vertical-flip-card *::before, .hfx-vertical-flip-card *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<div class="group h-32 w-56 [perspective:40em]">
<div class="relative h-full transition-transform duration-700 ease-[cubic-bezier(.3,1.3,.5,1)] [transform-style:preserve-3d] group-hover:[transform:rotateX(-180deg)]">
<div class="absolute inset-0 flex flex-col justify-end rounded-xl border bg-white p-4 text-gray-900 [backface-visibility:hidden]">
<strong class="text-lg">Ada Park</strong>
<small class="text-gray-500">Product Designer</small>
</div>
<div class="absolute inset-0 flex flex-col justify-center gap-1.5 rounded-xl bg-blue-500 p-4 text-sm text-white [backface-visibility:hidden] [transform:rotateX(180deg)]">
<span>ada@studio.dev</span>
<span>+1 555 0142</span>
<span>studio.dev/ada</span>
</div>
</div>
</div>Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.