原生JavaScript+CSS3实现X/Y轴3D照片墙

X 轴 Y 轴的 3D 照片墙，靠的是原生 JavaScript配合CSS3 的 3D 变换搞出来的一个蛮酷的展示方式。用起来也不复杂，CSS 这边主要是用transform搞旋转和位移，像rotateX()、rotateY()这些你平时都见过。加上translate3d()一调，立体感就出来了。

而 JS 主要负责交互，像监听鼠标滚动、滑动这些，动态改一下transform的值，照片墙就能跟着动，旋转感十足。整个过程其实挺流畅的，不用引库也能玩得转，属于“轻量好看还不难”的那一类效果。

结构上，就是把照片放在一个 3D 空间的网格里，X 轴 Y 轴分布好位置，再配合perspective和transform-style: preserve-3d，一瞬间就有点“空间感”了。如果你想进一步加点交互，比如点击放大、悬停旋转，用 JS 改 CSS 值就行，挺自由。

文件夹texiao1201_1560680932里包含了完整的 HTML、CSS 和 JS 代码，直接跑就能看效果。代码也比较清晰，适合拿来练手或者改成你自己的展示项目。

建议你在交互动画里用requestAnimationFrame，这样更流畅，也省性能。手机端要做的话，记得适配下触摸事件，体验会更友好。

如果你对这种 3D 效果还挺感兴趣，可以顺便看看下面这些：3D 菜单特效、CSS3 3D 旋转特效、3D 翻拍效果，灵感也许就来了。