答案：利用css 3d变换与关键帧动画实现图片卡片堆叠效果，需先通过perspective创建透视环境，结合transform-style: preserve-3d确保子元素在3d空间渲染；再使用translatez沿z轴错开卡片层级，配合rotatex/y增加倾斜立体感；最后通过@keyframes定义动画，使卡片从负translatez值“飞入”，设置不同animation-delay实现逐张出场的堆叠展开效果，注意控制景深、层级间距与动画节奏以提升视觉自然度。
想用CSS实现图片卡片堆叠效果，核心是利用3D变换和关键帧动画。通过transform的translateZ控制层级深度，结合@keyframes定义动画过程，可以让多张卡片呈现出立体堆叠、翻转或滑动出场的视觉效果。
设置3D空间环境
要让translateZ生效，必须先建立一个有景深的3D渲染上下文。
- 给父容器设置
perspective，比如1000px，数值越小透视感越强 - 父容器开启
transform-style: preserve-3d，确保子元素在3D空间中渲染 - 避免触发平面扁平化，不要对子元素使用
transform以外的2D叠加属性
示例：
.container {
perspective: 1000px;
}
.stack {
transform-style: preserve-3d;
}
使用translateZ控制卡片层级
每张卡片通过transform: translateZ()沿Z轴前后错开，形成堆叠感。
-
translateZ(0)在最底层 - 每层递增，如
translateZ(10px)、translateZ(20px)，数值越大越靠前 - 可配合
rotateX或rotateY增加倾斜角度，增强立体感
示例：
.card:nth-child(1) {
transform: translateZ(0);
}
.card:nth-child(2) {
transform: translateZ(10px) rotateY(5deg);
}
.card:nth-child(3) {
transform: translateZ(20px) rotateY(-5deg);
}
用@keyframes制作动态入场动画
通过关键帧定义初始状态和最终状态，让卡片“飞入”视野。
- 初始时所有卡片
translateZ为负值（如-100px），不可见 - 动画结束时恢复到目标位置
- 设置不同
delay让卡片依次出现，形成堆叠展开效果
示例：
@keyframes slideIn {
from {
transform: translateZ(-80px);
}
to {
transform: translateZ(20px) rotateY(0);
}
}
.card {
animation: slideIn 0.8s ease-out forwards;
animation-delay: calc(0.1s * var(--i));
}
基本上就这些。合理搭配perspective、translateZ和@keyframes，就能做出自然的3D堆叠动画。注意控制动画节奏和层级间距，避免视觉混乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
