Tilt Hover
No library Intermediate
On hover, the box tilts in 3D perspective (rotateX + rotateY) giving depth and a subtle lift shadow. Clicking snaps it flat and fills with cyan. The tilt resets once checked.
On hover, the box tilts in 3D perspective (rotateX + rotateY) giving depth and a subtle lift shadow. Clicking snaps it flat and fills with cyan. The tilt resets once checked.
Goal: Create a "Tilt Hover" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On hover (unchecked): box tilts in 3D — perspective(300px) rotateX(12deg) rotateY(-14deg) scale(1.08) — giving depth and a subtle directional shadow. Border brightens to cyan. On click/check: snaps flat (all rotations to 0), fills with dark cyan (#0891b2), bright cyan border. Tilt only applies while unchecked; checked state stays flat.
Technique: onMouseEnter/Leave toggle a hovered state. The transform property is computed from hovered and on states. All transitions use cubic-bezier spring.
Accessibility: Hidden native <input type="checkbox">. Transform and transitions removed under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.