# Drag Transforms > Drag a card that stays angled and tilts in 3D — translation composes with authored rotate, skew, perspective, and whileDrag channels. **Source:** [https://motion.svelte.page/examples/drag-transforms](https://motion.svelte.page/examples/drag-transforms) **Markdown mirror:** [https://motion.svelte.page/examples/drag-transforms.md](https://motion.svelte.page/examples/drag-transforms.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: angled drag composition. The card rests at an authored angle. Dragging translates it without flattening that angle — the drag translation is composed into the same transform as the authored rotate and skew, rather than replacing it. **Metadata:** tag: `DRAG` | channels: `rotate · skewX · whileDrag` ### Notes - The resting angle is authored as transform channels — `rotate` and `skewX` on `style` — not as a raw CSS `transform` string. - Grab and drag. The card keeps its angle the whole way: drag translation is written into the same composed transform instead of overwriting it. - `whileDrag` layers a second `rotate` on top for the duration of the gesture, which takes over the channel while the pointer is down and hands it back on release. ### Source #### Angled.svelte Source file: [src/lib/examples/drag-transforms/demos/Angled.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/drag-transforms/demos/Angled.svelte) ```svelte
// angled drag state: {dragging ? 'dragging' : 'idle'}
rotate −8°
skewX −5°
(dragging = true)} onDragEnd={() => (dragging = false)} whileHover={{ scale: 1.03 }} whileDrag={{ rotate: 4, scale: 1.08, cursor: 'grabbing' }} transition={{ type: 'spring', stiffness: 420, damping: 32 }} aria-label="Draggable angled card" style={{ rotate: -8, skewX: -5, width: 'clamp(96px, 15vw, 132px)', aspectRatio: '1', cursor: 'grab', touchAction: 'none', backgroundColor: 'var(--brut-accent, #247768)', border: '1px solid var(--brut-ink, #0a0a0a)', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)' }} > SM angled
authored rotate authored skew whileDrag rotate
elastic: 0.28
``` ## FIG-002: perspective tilt on grab. A 3D variant: grabbing the card tilts it on both axes under a transformPerspective, and it keeps tilting while it tracks the pointer. The perspective and rotation survive every live drag frame. **Metadata:** tag: `DRAG` | channels: `transformPerspective · rotateX · rotateY` ### Notes - `transformPerspective` is set on the card itself, so the tilt reads as depth without needing a `perspective` wrapper around the stage. - `whileDrag` applies `rotateX` and `rotateY` together. Both 3D channels stay composed with the live translation for every frame of the drag. - Release and the spring returns the card to flat while it settles back inside the bounds — the tilt unwinds instead of snapping. ### Source #### Perspective.svelte Source file: [src/lib/examples/drag-transforms/demos/Perspective.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/drag-transforms/demos/Perspective.svelte) ```svelte
// perspective drag state: {dragging ? 'dragging' : 'idle'}
transformPerspective 900
rotateX −14° · rotateY 22°
(dragging = true)} onDragEnd={() => (dragging = false)} whileHover={{ scale: 1.03 }} whileDrag={{ rotateX: -14, rotateY: 22, scale: 1.08, cursor: 'grabbing' }} transition={{ type: 'spring', stiffness: 320, damping: 28 }} aria-label="Draggable perspective card" style={{ transformPerspective: 900, width: 'clamp(104px, 17vw, 148px)', aspectRatio: '1', cursor: 'grab', touchAction: 'none', backgroundColor: 'var(--brut-accent, #247768)', border: '1px solid var(--brut-ink, #0a0a0a)', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)' }} > SM tilt
transformPerspective whileDrag rotateX whileDrag rotateY
elastic: 0.28
```