利用css3实现照片墙3d倾斜展开动效，核心在于为容器设置`perspective`属性以建立三维空间，并为每个子元素应用`transform: rotatey()`和`translatez()`进行空间布局。通过定义不同的旋转角度和深度偏移，将平面的网格转化为立体的扇形或弧形结构，再结合`transition`属性实现平滑的交互过渡。
如何构建基础的3D透视环境
要实现3D效果，必须首先在父容器上启用透视（Perspective）。这相当于在用户眼睛和屏幕之间放置一个虚拟的相机，决定了物体远近产生的大小变化程度。通常使用`perspective`属性直接作用于容器，或者使用`perspective-origin`调整观察点的位置。没有这一步，所有的`rotate`和`translateZ`变换都只是在二维平面上的视觉欺骗，无法产生真实的纵深感。
.photo-wall {
width: 800px;
height: 600px;
position: relative;
perspective: 1000px; /* 关键：设置视距 */
transform-style: preserve-3d; /* 保持子元素的3D上下文 */
}
上述代码中，`perspective: 1000px` 表示观察者距离屏幕1000像素。数值越小，透视感越强，物体变形越剧烈；数值越大，画面越接近平行投影。`transform-style: preserve-3d` 确保子元素在进行3D变换时，不会塌陷到父元素的平面上，这对于后续的子元素独立旋转至关重要。
如何计算并应用每个照片的3D坐标
确定透视后，下一步是为每张照片分配具体的3D坐标。假设我们要制作一个半圆形的展开效果，可以将照片均匀分布在圆周上。对于第 `i` 张照片，其旋转角度 `angle` 可以通过总角度除以照片数量来计算。然后，利用`rotateY(angle)`让照片面向圆心，再利用`translateZ(radius)`将其向外推至半径位置。这样，所有照片就形成了一个围绕中心点的弧形墙面。
.photo-item {
position: absolute;
width: 150px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -75px; /* 居中修正 */
margin-top: -50px; /* 居中修正 */
transition: all 0.5s ease;
}
/* 示例：第一张照片 */
.photo-item:nth-child(1) {
transform: rotateY(-90deg) translateZ(400px);
}
/* 示例：第二张照片 */
.photo-item:nth-child(2) {
transform: rotateY(-45deg) translateZ(400px);
}
在这个结构中，`rotateY` 控制照片的朝向，`translateZ` 控制照片离中心的距离。通过JavaScript动态计算每个子元素的索引，生成对应的CSS类或直接内联样式，即可自动化生成任意数量的照片墙。关键在于保持`translateZ`的值恒定，以确保所有照片位于同一个球面或圆柱面上。
悬停时如何实现单张照片的独立展开与高亮
当用户鼠标悬停在某张照片上时，我们希望该照片脱离原有曲面，向前突出并放大，同时其他照片保持原位或轻微后退。这可以通过CSS的`:hover`伪类和更高的`z-index`来实现。当悬停发生时，覆盖原有的`rotateY`和`translateZ`，改为`translateZ(larger_radius)`和`scale(1.1)`，从而在视觉上“展开”并聚焦于当前选中的照片。
.photo-item:hover {
z-index: 100; /* 确保悬停层在最上方 */
transform: rotateY(0deg) translateZ(600px) scale(1.1);
box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 增加阴影增强立体感 */
}
这里将`rotateY`重置为0度，意味着照片正对观察者，消除了曲面的扭曲感，使其看起来像是从墙上“飞”出来。`translateZ`增加到600px，比静态时的400px更靠近用户，强化了前景效果。配合`box-shadow`，可以进一步区分前景与背景，提升交互的反馈感。这种设计无需复杂的JavaScript动画库，仅靠CSS3的硬件加速特性即可实现流畅的60fps动效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
