svelte-tilt
npm i -D svelte-tilt
Default
use:tilt
Strong
use:tilt={{ strength: 3 }}
Reversed
use:tilt={{ reverse: true }}
Scale
use:tilt={{ scale: 1.2 }}
Short transition
use:tilt={{ transition: 50 }}
Long transition
use:tilt={{ transition: 1000 }}
Disable X axis
use:tilt={{ xAxis: false }}
Disable Y axis
use:tilt={{ yAxis: false }}
Disable recovery (and keep tilt state)
use:tilt={{ recovery: false }}
Float!
Floaty Text
(parent) display: block;
(child) transform: translateZ(20px); display: block;
Listen to changes
use:tilt on:tilt={event => console.log(event.detail)} on:mouseleave=... on:mouseenter=...