Repository Public
1<!--2 ============================================================3 SVGarden — https://www.svgarden.dev4 Author : Simon-Pierre Boucher5 Contact: contact@spboucher.ai6 File : snippets/interactive/card-3d-tilt.html7 Desc : Pseudo-3D card tilt with layered depth and a moving sheen8 ============================================================9-->10<!--svgarden11title: 3D tilt card12slug: card-3d-tilt13category: interactive14tags: [interactive, card, 3d, hover, depth]15difficulty: intermediate16techniques: [perspective, preserve-3d, "translateZ()", background-position-sheen, ":focus-visible"]17how_it_works: >18 Three ingredients make flat markup read as a physical object: perspective on19 the wrapper defines how aggressively depth foreshortens, transform-style:20 preserve-3d on the card lets its children keep their own Z positions, and21 each layer (badge, title, body) sits at a different translateZ, so when the22 card rotates on hover the layers shift against each other in true parallax.23 The glare is a wide diagonal gradient whose background-position slides on24 hover — backgrounds clip to the border-radius, which avoids overflow: hidden25 (overflow would force the card flat and kill preserve-3d, the classic26 gotcha). tabindex plus :focus-visible gives keyboard users the same tilt.27customizable:28 - { var: "--sg-color", label: "Accent", type: color, default: "#7F77DD" }29 - { var: "--sg-size", label: "Width", type: range, min: 180, max: 340, default: 240, unit: px }30 - { var: "--sg-duration", label: "Speed", type: range, min: 0.2, max: 1.2, step: 0.05, default: 0.5, unit: s }31created: 2026-08-1032-->33<div class="sg-card-3d-tilt" style="--sg-color:#7F77DD; --sg-size:240px; --sg-duration:0.5s;">34 <div class="sg-card-3d-tilt-card" tabindex="0">35 <svg class="sg-card-3d-tilt-badge" viewBox="0 0 24 24" aria-hidden="true" focusable="false">36 <polygon points="12,2 15,9 22,9.6 17,14.4 18.4,21.6 12,18 5.6,21.6 7,14.4 2,9.6 9,9" />37 </svg>38 <strong class="sg-card-3d-tilt-title">Depth, not decoration</strong>39 <span class="sg-card-3d-tilt-text">Hover or focus: the layers sit at different translateZ heights, so the tilt reads as thickness.</span>40 </div>41</div>42<style>43 .sg-card-3d-tilt {44 width: var(--sg-size);45 perspective: 900px;46 }47 .sg-card-3d-tilt-card {48 position: relative;49 display: flex;50 flex-direction: column;51 gap: 0.45rem;52 padding: 1.15rem 1.2rem 1.3rem;53 border: 1px solid rgba(128, 128, 128, 0.35);54 border-radius: 14px;55 background:56 linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%) no-repeat,57 rgba(128, 128, 128, 0.1);58 background-size: 250% 100%, auto;59 background-position: 110% 0, 0 0;60 transform-style: preserve-3d;61 transition: transform var(--sg-duration) ease, background-position var(--sg-duration) ease;62 cursor: pointer;63 }64 .sg-card-3d-tilt-card:hover,65 .sg-card-3d-tilt-card:focus-visible {66 transform: rotateX(11deg) rotateY(-13deg);67 background-position: -10% 0, 0 0;68 }69 .sg-card-3d-tilt-card:focus-visible {70 outline: 2px solid var(--sg-color);71 outline-offset: 4px;72 }73 .sg-card-3d-tilt-badge {74 width: 34px;75 transform: translateZ(46px);76 }77 .sg-card-3d-tilt-badge polygon {78 fill: var(--sg-color);79 }80 .sg-card-3d-tilt-title {81 font-size: 1.02rem;82 font-weight: 600;83 transform: translateZ(28px);84 }85 .sg-card-3d-tilt-text {86 font-size: 0.84rem;87 opacity: 0.75;88 line-height: 1.5;89 transform: translateZ(14px);90 }91</style>92