为你心仪的她做一个 “旋转木马“告白相册【零基础纯 CSS3 实现】_前端3d环绕图片

//第一个图片
 transform: rotateY(0deg) translateZ(470px);
//第二个图片
 transform: rotateY(120deg) translateZ(470px);
//第三个图片
 transform: rotateY(240deg) translateZ(470px);

---

💳 动画设置：

我共设置了两个动画，一个是控制整体在刷新页面时从左上角移动到中心再保持不动，第二个就是图片整体的旋转动画

 section{
            transform: translate(-50% -50%);
            transform-style: preserve-3d;
            animation: rotate 8s linear infinite;
        }
 section:hover{
            animation-play-state: paused;
        }
  @keyframes move{
             0%{
                translate: translate(-1000px ,-1000px);
             }
             100%{
                transform: translate(0,100px);
             }
        }
        @keyframes rotate{
            0%{
                transform: rotateX(-7deg) rotateY(0);
            }
            100%{
                transform:rotateX(-7deg) rotateY(360deg);
            }
        }

---

💳 主要代码：

@keyframes move{
             0%{
                translate: translate(-1000px ,-1000px);
             }
             100%{
                transform: translate(0,100px);
             }
        }
        @keyframes rotate{
            0%{
                transform: rotateX(-7deg) rotateY(0);
            }
            100%{
                transform:rotateX(-7deg) rotateY(360deg);
            }
        }
        section div:nth-child(1){
            -webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
            transform: translateZ(470px);
            background-image: url(./img/1.jpg);
        }
        section div:nth-child(2){
            -webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
            transform: rotateY(45deg) translateZ(470px);
            background-image: url(./img/2.png);
        }
        section div:nth-child(3){
            -webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
            transform: rotateY(90deg) translateZ(470px);
            background-image: url(./img/3.png);
        }
        section div:nth-child(4){
            -webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
            transform: rotateY(135deg) translateZ(470px);
            background-image: url(./img/4.gif);
        }
        section div:nth-child(5){
            -webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
            transform: rotateY(180deg) translateZ(470px);
            background-image: url(./img/5.webp);
        }
        section div:nth-child(6){
            -webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
            transform: rotateY(225deg) translateZ(470px);
            background-image: url(./img/6.webp);
        }
        section div:nth-child(7){
            -webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
            transform: rotateY(270deg) translateZ(470px);
            background-image: url(./img/7.jpg);
        }
        section div:nth-child(8){
            -webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
            transform: rotateY(315deg) translateZ(470px);
            background-image: url(./img/8.png);
        }

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

.csdn.net/topics/618545628)**

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！