Library Effects

Perspective Hover

Card tilts in perspective toward the pointer.

Card tilts in perspective toward the pointer.将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Effects
Category: Hover
Style: Minimal
Tech stack: CSS
Animation: Hover
Difficulty: Beginner
License: Personal
Access: Free
Views: 874

Hover
Tilt
CSS
JavaScript

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Create perspective hover tilt on cards with max 18deg. Disable on coarse pointers.

Code

<!-- HTML -->
<div class="card" id="card"><span>3D Tilt</span></div>

/* CSS */
body{display:grid;place-items:center;perspective:800px}.card{width:min(70%,220px);aspect-ratio:4/5;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,rgba(255,255,255,.08),hsl(329 85% 62%)22);display:grid;place-items:center;border-radius:4px;transform-style:preserve-3d;transition:transform .12s ease-out}.card span{font:600 14px/1 system-ui;letter-spacing:.08em;text-transform:uppercase}

// JS
var el=document.getElementById("card");window.addEventListener("pointermove",function(e){var r=el.getBoundingClientRect(),px=(e.clientX-r.left)/r.width-.5,py=(e.clientY-r.top)/r.height-.5;el.style.transform="rotateY("+px*18+"deg) rotateX("+(-py*18)+"deg)"});window.addEventListener("pointerleave",function(){el.style.transform="rotateY(0) rotateX(0)"});