<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
perspective: 1000px;
}
.cardImg {
width: 400px;
height: 250px; /* 固定高度确保效果一致 */
object-fit: cover; /* 保持图片比例 */
border-radius: 16px;
/* 3D变换 */
transform:
rotateX(var(--rotateX, 0deg))
rotateY(var(--rotateY, 0deg))
translateZ(50px);
/* 过渡 */
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* 3D设置 */
transform-style: preserve-3d;
/* 多重阴影和光效 */
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.1),
0 15px 35px rgba(0, 0, 0, 0.5),
0 5px 15px rgba(0, 0, 0, 0.3);
/* 反射光效果 */
position: relative;
overflow: hidden;
}
.cardImg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%
);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
z-index: 2;
}
.cardImg:hover::before {
opacity: 0.6;
}
.cardImg:hover {
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.2),
0 25px 50px rgba(0, 0, 0, 0.7),
0 10px 20px rgba(0, 0, 0, 0.4);
transform:
rotateX(var(--rotateX, 0deg))
rotateY(var(--rotateY, 0deg))
translateZ(80px)
scale(1.05);
}
</style>
</head>
<body>
<div class="wrapper">
<img class="cardImg" src="./1.jpg" alt="3D card">
</div>
<script>
const cardImg = document.querySelector('.cardImg');
// 旋转角度范围
const rotateRange = 20; // 最大旋转角度
cardImg.addEventListener('mousemove', (e) => {
const { offsetX, offsetY } = e;
const { offsetWidth, offsetHeight } = cardImg;
// 计算旋转角度
// offsetX / offsetWidth 范围是 0-1，减去0.5得到 -0.5 到 0.5
const rotateY = -((offsetX / offsetWidth) - 0.5) * rotateRange * 2; // -20 到 20
const rotateX = -(0.5 - (offsetY / offsetHeight)) * rotateRange * 2; // -20 到 20
// 设置CSS变量
cardImg.style.setProperty('--rotateX', `${rotateX}deg`);
cardImg.style.setProperty('--rotateY', `${rotateY}deg`);
});
cardImg.addEventListener('mouseleave', () => {
// 平滑回到初始状态
cardImg.style.setProperty('--rotateX', '0deg');
cardImg.style.setProperty('--rotateY', '0deg');
});
</script>
</body>
</html>