💳 效果展示：

本案例的内容为一个原理是通过CSS3新特性animations动画，以及@keyfream关键帧来控制其整体旋转移动的旋转木马样式的旋转图，其拿来做网页是个不错的选择，也可以加上整体“飞进来”的移动效果，再定住旋转。 其次虽然标题是告白相册，效果里面就不放女朋友的美照了防止虐狗 🥰🥰🥰，就用个前端技能树的图片代替哈，有需要大家自行替换即可。

💳 源码分析： 

      此处为源码分析部分本次案例最主要还是用到了 CSS3 的 3D 板块的内容，例如transform以及trasition过渡的相关知识，大家要注意的就是在旋转中布局的时候，要加上透视perpecsive并赋予合适的视距值，再其次相关知识就是 animation 动画的书写设置。最主要的还是如何将你的图片们呈现3D环绕布局效果，这是第二的难点，原理为先旋转出没一个照片对应的角度，再一一向外扩散。

💳 布局分析：

其实布局并没有大家想象中那么困难，只需要将所有图片加上定位后全部先按各自需要旋转的角度旋转，然后再向外拉远距离，就可以呈现环绕效果了，其俯视理解如下（用只有三张图片时举例，三个图片环绕一周，那么第一个图片需要旋转0度，及正面面对我们，第二个图片需要旋转120度，第三个图片需要旋转240度，同理如果是八张图片，那么第一个旋转45度，第二个图片旋转90度，第三个旋转135度......以此类推，三张图片的旋转俯视图即以下效果）切记此处连写transform动画时一定要做到先写旋转再写移动扩散。不然会出现不可预知的错误：

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

当我们旋转完后想要呈现边框挨边框的环绕效果，需要让每个图片再向外移动（此处可以理解为扩散），要注意的是只有添加了透视 perspective 才能显示出立体效果，值的大小可以根据需要去设置，此处我设置的是 perspective: 1200px；注意透视 perspective要加给需要产生透视元素的父元素身上，另外切记此处要先旋转了再移动，否则会达不到理想效果。

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

💳 动画设置：

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

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);
            }
        }

💳 主要代码：

             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);
        }