Weekend in Lisbon
Three days of tiles, tarts and trams.
3D Tilt Card
The card tips back and to the side in 3D as if pushed at one corner. Pure CSS tilts in a fixed direction; it does not follow the cursor, and it does not need to.
Also known as: perspective card hover, tilt on hover.
HTML
<article class="hfx-card-tilt">
<div class="hfx-card-tilt-image"></div>
<div class="hfx-card-tilt-body">
<h3>Weekend in Lisbon</h3>
<p>Three days of tiles, tarts and trams.</p>
</div>
</article>CSS
.hfx-card-tilt {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
width: 15em;
border-radius: 0.75em;
overflow: hidden;
background: #fff;
border: 1px solid color-mix(in srgb, #000 10%, transparent);
color: #1f2937;
font-family: system-ui, sans-serif;
transition: transform 0.35s ease, box-shadow 0.35s ease;
transform: perspective(40em) rotateX(0) rotateY(0);}
.hfx-card-tilt:hover {
transform: perspective(40em) rotateX(6deg) rotateY(-8deg) translateY(-0.3em);
box-shadow: -0.6em 1em 2em color-mix(in srgb, #000 18%, transparent);
}
.hfx-card-tilt-image {
height: 7em;
background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
}
.hfx-card-tilt-body {
padding: 0.9em 1em 1.1em;
}
.hfx-card-tilt h3 {
margin: 0 0 0.25em;
font-size: 1.05em;
}
.hfx-card-tilt p {
margin: 0;
font-size: 0.85em;
color: #6b7280;
line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
.hfx-card-tilt, .hfx-card-tilt *, .hfx-card-tilt::before, .hfx-card-tilt::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}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.