3D 旋转倒影照片墙 | 可复制源代码

简介：纯html+css实践3D旋转倒影墙
3D旋转效果图：

3D 旋转倒影照片墙
3D旋转源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编程经验共享</title>
    <style>
    body{display:flex;justify-content:center;margin-top:100px;background-color:#212121;}
    .container{position:relative;}
    .stage{
        position:relative;width:800px;height:240px;margin:20pxauto;perspective:2000px;
        transform-style:preserve-3d;
        -webkit-box-reflect:below 10px linear-gradient(transparent,rgba(0,0,0,0.5));
    }
    .stage .control{
        position:relative;width:100%;height:100%;transform-style:preserve-3d;
        transform:translateZ(-2000px) rotateY(50deg) rotateZ(0deg);
        animation:rotate 30s linear infinite;
    }
    .stage .control .imgWrap{
        position:absolute;width:400px;height:400px;top:50%;left:50%;transform:translate(-50%,-50%);
        transform-style:preserve-3d;
    }
    .stage .control .imgWrap .img{
        position:absolute;width:500px;height:400px;line-height:400px;text-align:center;
        font-size:120px;top:0;left:0;transform-style:preserve-3d;
        transform-origin:50% 50% 0px;
    }
    .stage .control .imgWrap img{
        width:100%;height:100%;object-fit:cover;
    }
    .stage .control .imgWrap .img1{
        transform:rotateY(80deg) translateZ(650px);
    }
    .stage .control .imgWrap .img2{
        transform:rotateY(125deg) translateZ(650px);
    }
    .stage .control .imgWrap .img3{
        transform:rotateY(170deg) translateZ(650px);
    }
    .stage .control .imgWrap .img4{
        transform:rotateY(215deg) translateZ(650px);
    }
    .stage .control .imgWrap .img5{
        transform:rotateY(260deg) translateZ(650px);
    }
    .stage .control .imgWrap .img6{
        transform:rotateY(305deg) translateZ(650px);
    }
    .stage .control .imgWrap .img7{
        transform:rotateY(350deg) translateZ(650px);
    }
    .stage .control .imgWrap .img8{
        transform:rotateY(395deg) translateZ(650px);
    }
    @keyframes rotate{
        0%{transform:translateZ(-2000px) rotateY(0deg);}
        50%{transform:translateZ(-2000px) rotateY(-360deg);}
        100%{transform:translateZ(-2000px) rotateY(-720deg);}
    }
    </style>
  </head>
  <body>
    <div class="container">
        <div class="stage">
            <div class="control">
                <div class="imgWrap">
                    <div class="img img1"><img src="https://picsum.photos/2000/1000?random=99"></div>
                    <div class="img img2"><img src="https://picsum.photos/2000/1000?random=100"></div>
                    <div class="img img3"><img src="https://picsum.photos/2000/1000?random=101"></div>
                    <div class="img img4"><img src="https://picsum.photos/2000/1000?random=102"></div>
                    <div class="img img5"><img src="https://picsum.photos/2000/1000?random=103"></div>
                    <div class="img img6"><img src="https://picsum.photos/2000/1000?random=104"></div>
                    <div class="img img7"><img src="https://picsum.photos/2000/1000?random=105"></div>
                    <div class="img img8"><img src="https://picsum.photos/2000/1000?random=106"></div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>
3D 旋转 倒影照片墙 | 可复制源代码

3D旋转效果图：

3D旋转源码：

3D 旋转倒影照片墙 | 可复制源代码
