HTML+CSS|【HTML+CSS+JS】前端三剑客实现3D旋转照片墙前端|css|html

最近大家应该都对3D照片墙很心动吧，赶快拿走给女朋友制作一个，让她知道代码的浪漫

源码如下：
1.把html 文件和img文件放在同级目录下
2.照片格式要注意是否一致哦

3D旋转照片墙 - 锐客网/* 去掉默认效果 */ * { margin: 0; padding: 0; }body { background: #222; overflow: hidden; /* 取消选中 */ user-select: none; }@keyframes rotate { 100% { transform: rotateY(360deg); } }.perspective { /*子元素透视场景深度*/ perspective: 600px; }.wrap { /* 3d */ width: 135px; height: 240px; margin: 100px auto; position: relative; /* border: 1px solid red; */ transform: rotateX(-20deg) rotateY(0deg); transform-style: preserve-3d; }.wrap img { display: block; /* 绝对定位 */ position: absolute; width: 100%; height: 100%; transform: rotateY(0deg) translateZ(0px); background: transparent; box-shadow: 0 0 4px #fff; border-radius: 5px; /* webkit */ }/* 照片底座 */ .wrap p { width: 1200px; height: 1200px; background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0)); position: absolute; border-radius: 50%; left: 50%; top: 100%; margin-left: -600px; margin-top: -600px; /* 沿着x轴按倒 */ transform: rotateX(90deg); } 文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片【HTML+CSS|【HTML+CSS+JS】前端三剑客实现3D旋转照片墙】