这个 HTML 文件实现了一个 3D 效果的图片卡片交互效果，当鼠标悬停在卡片上时，卡片会根据鼠标位置产生 3D 倾斜效果，并显示一个高光反射效果。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡片3D倾斜效果</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@property --x {
syntax: '<number>';
initial-value: 0;
inherits: true;
}
@property --y {
syntax: '<number>';
initial-value: 0;
inherits: true;
}
@layer reset {
* {
margin: 0;
}
svg,
img {
display: block;
}
}
.visually-hidden {
position: fixed;
top: -999vh;
left: -999vw;
pointer-events: none;
}
main {
display: grid;
grid: auto-flow / repeat(auto-fit, 300px);
gap: 30px;
place-items: center;
place-content: center;
height: 100vh;
background:radial-gradient(#424242 0 1px, #0000 1px 10px) 0 / 1em 1em,linear-gradient(#EDEEEE, #E0E0E0)
}
.card {
width: 300px;
aspect-ratio: 9/12;
perspective: 1200px;
transform-style: preserve-3d;
}
figure {
--atan: calc(-1 * atan2(var(--x), var(--y)));
position: relative;
height: 100%;
border-radius: 1em;
transform: rotateX(calc(var(--x) * 1deg)) rotateY(calc(var(--y) * 1deg));
overflow: hidden;
will-change: transform;
transition: --x 400ms ease,--y 400ms ease;
}
figure:hover {
transition-duration: 0s;
}
figure:hover::after {
opacity: 1;
}
figure::after {
content: '';
position: absolute;
inset: 0;
background: url('https://images.unsplash.com/photo-1615715874901-ad6a07ec5c88?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NTQ0MjE2ODd8&ixlib=rb-4.1.0&q=85') center / cover;
mask-image: conic-gradient(from var(--atan), #0000, #fffa, #0000, #fffa, #0000);
backdrop-filter: url(#filterEdges);
opacity: 0;
mix-blend-mode: plus-lighter;
transition: opacity 200ms;
}
figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<svg width="0" height="0">
<defs>
<filter id="filterEdges">
<feConvolveMatrix kernelMatrix="0 1 0 1 -4 1 0 1 0" order="3 3" bias="0" divisor="1"
preserveAlpha="true" />
</filter>
</defs>
</svg>
<main>
<div class="card">
<figure>
<img src="https://images.unsplash.com/photo-1579783928621-7a13d66a62d1?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NTQ0MDUyNDN8&ixlib=rb-4.1.0&q=85"
alt="">
</figure>
</div>
<div class="card">
<figure>
<img src="https://images.unsplash.com/photo-1575396574188-ccf23d32d4b8?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NTQ0ODM3MTN8&ixlib=rb-4.1.0&q=85"
alt="">
</figure>
</div>
</main>
<script>
const cards = document.querySelectorAll('.card');
let mouseEnterTarget = null;
let targetBounds = null;
function handleMouseEnter(e) {
mouseEnterTarget = e.target;
targetBounds = e.target.getBoundingClientRect();
mouseEnterTarget.addEventListener('mousemove', handleMouseMove);
mouseEnterTarget.addEventListener('mouseleave', handleMouseLeave);
}
function handleMouseLeave(e) {
mouseEnterTarget.style.setProperty('--x', 0);
mouseEnterTarget.style.setProperty('--y', 0);
mouseEnterTarget.removeEventListener('mousemove', handleMouseMove);
}
function handleMouseMove(e) {
const { offsetX, offsetY } = e;
const centerX = offsetX - (targetBounds.width * 0.5);
const centerY = offsetY - (targetBounds.height * 0.5);
const posX = Math.round(-1 * centerX * 0.1);
const posY = Math.round(centerY * 0.1);
mouseEnterTarget.style.setProperty('--x', posY);
mouseEnterTarget.style.setProperty('--y', posX);
}
cards.forEach(card => {
card.addEventListener('mouseenter', handleMouseEnter);
})
</script>
</body>
</html>
HTML
svg：定义了一个滤镜效果，用于创建边缘高光效果 main：作为主容器，包含两个.card 元素 每个.card 包含一个 figure 和 img，显示来自 Unsplash 的图片
CSS
CSS 变量和属性定义：
使用@property 定义了--x 和--y 两个自定义属性，用于控制 3D 旋转 这些属性有初始值 0，并支持动画过渡效果
布局样式：
主容器使用 CSS Grid 布局，自动适应不同屏幕尺寸 卡片固定宽度 300px，保持 9:12 的宽高比
3D 效果：
.card 设置了 perspective: 1200px 和 transform-style: preserve-3d 创建 3D 空间 figure 元素使用 rotateX 和 rotateY 根据--x 和--y 变量进行 3D 旋转 使用 will-change: transform 优化动画性能
高光效果：
通过::after 伪元素创建高光效果 使用 conic-gradient 创建基于角度的遮罩 backdrop-filter 应用 SVG 定义的边缘滤镜效果 mix-blend-mode: plus-lighter 增强高光效果
JavaScript
事件监听：
为每个卡片添加 mouseenter 事件监听 进入时添加 mousemove 和 mouseleave 监听
鼠标移动处理：
计算鼠标相对于卡片中心的位置 将位置转换为旋转角度（--x 和--y 值） 这些值会通过 CSS 变量传递给 CSS，实现 3D 旋转效果
鼠标离开处理：
重置旋转角度为 0 移除 mousemove 事件监听
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
