Tilted Card
Tilted Card
A card with perspective 3D tilt using CSS transforms.
<div style="perspective:800px;display:inline-block"><div style="max-width:280px;padding:24px;background:linear-gradient(145deg,#1e293b,#334155);border-radius:16px;border:1px solid rgba(255,255,255,0.1);color:#fff;transform:rotateX(5deg) rotateY(-10deg);box-shadow:20px 20px 40px rgba(0,0,0,0.4),-5px -5px 20px rgba(255,255,255,0.05);transition:transform 0.3s"><h3 style="margin:0 0 8px;font-size:1.2em">Tilted Card</h3><p style="margin:0;opacity:0.7;font-size:0.9em">A card with perspective 3D tilt using CSS transforms.</p></div></div>Customize
deg
deg
px
Props
| Name | Type | Default | Description |
|---|---|---|---|
text | text | Tilted Card | Displayed text |
rotateX | slider (deg) | 5deg | Horizontal tilt angle |
rotateY | slider (deg) | -10deg | Vertical tilt angle |
borderRadius | slider (px) | 16px | Corner roundness |
Card with CSS perspective 3D tilt effect