3D旋转木马相册案例

思路：

graph TD
分析整体结构 -->准备相关知识点资料

首先设置一个section父盒子，把8个div放入里面，8个div里面放置对应的八张图片

<section>
        <div><</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</section>

给body父盒子设置弹性布局，并让它水平、垂直居中,设置窗口高度为100%; 使用透视perspective让元素看起来更有3D效果，并且设置背景颜色为黑色
```
body {
     perspective: 1000px;
 }
```
- perspective属性包括两个属性：none和具有单位的长度值。
- 当perspective设置length时，如果越小则表示3D效果越明显，你的眼睛就越靠近3D物体，反之则3D效果则离3D物体越来越远。
因子盒子需要定位，利用父相子绝给父盒子添加相对定位，并且设置宽高

利用transform-style属性使子元素位于3D中
设置动画的执行动画：包含动画名称、时长、线性的、无限次播放

section{
    position: relative;
    width: 200px;
    height: 300px;
    cursor: pointer;
    transform-style: preserve-3d;
    animation: rotate 20s linear infinite;
}

给section设置伪类，鼠标移上动画会暂停

section:hover{
    animation-play-state: paused;
}

给div设置倒影效果，below是倒影效果在元素下方，15px是元素和倒影的距离，后面的属性是设置倒影渐变

box-reflect: below 15px -webkit-linear-gradient(transparent 50%,rgba(255,255,255,0.3));

6.设置 transform: translateZ(length)。

- 如果设置了perspective：300px时，设置translateZ的值越小，则子元素越小，当设置值接近300px时，此元素会在你面前，当超过300px以后，会到达你视野的后面，该元素就不可见了。

7. 利用伪类选中每一个div的句子，并设置transform: rotateY(0deg) ，每次增加45度，所有图片会从对应的角度向外移动，形成圈，从而立体

section div:nth-child(1){
    transform: rotateY(0deg) translateZ(300px);
}
section div:nth-child(2){
    transform: rotateY(45deg) translateZ(300px);
}
section div:nth-child(3){
    transform: rotateY(90deg) translateZ(300px);
}
section div:nth-child(4){
    transform: rotateY(135deg) translateZ(300px);
}
section div:nth-child(5){
    transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(6){
    transform: rotateY(225deg) translateZ(300px);
}
section div:nth-child(7){
    transform: rotateY(270deg) translateZ(300px);
}
section div:nth-child(8){
    transform: rotateY(315deg) translateZ(300px);
}

9.添加一个旋转动画，并用rotateY设置角度，使其旋转

@keyframes rotate {
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}

以下为完整代码

CSS3 Demo案例

3D旋转木马相册案例