css3 3D旋转相册带倒影的功能实现

来自逆战班的小白同学
涉及知识点：
1.定位 position: relative;（相对定位）  position: absolute;（绝对定位）

2.旋转 transform:  rotateX()； rotateY()； rotateZ()； 单位deg ，顺时针为正值，逆时针为负值
 
3.位移 transform: translateX(); translateY(); translateZ();   单位px， 顺时针为正值，逆时针为负值

4.盒子阴影 -webkit-box-reflect:  below ; 

5.CSS3渐变 background-image:linear-gradient( 20deg , red , blue);
 
6.3D效果
perspective: 400px;  离屏幕多远的距离去观察元素，值越大幅度越小。
transform-style: preserve-3d;
transition: 6s linear;

步骤
1.创建一个div容器，将3d旋转相册的素材添加进去
<div class="box">
    <ul>
        <li><img src="./img/1.jpg" alt=""></li>
        <li><img src="./img/2.jpg" alt=""></li>
        <li><img src="./img/3.jpg" alt=""></li>
        <li><img src="./img/4.jpg" alt=""></li>
        <li><img src="./img/5.jpg" alt=""></li>
        <li><img src="./img/6.jpg" alt=""></li>
    </ul>
</div>
2.先去除默认样式
*{margin: 0;padding: 0;}
ul{list-style: none;}
img{display: block; width:150px; height: 100px; }
3.给容器box和照片盒子ul>li设置大小和位置
.box{width:600px;height: 300px;border: solid slategrey 1px;margin:100px auto; }
.box ul{ width:150px; height: 100px; left: 50%;margin-left: -75px; top: 50%;margin-top: -50px;}
.box ul li{ left:0; top:0;}
4.添加照片属性和位置
ul li:nth-of-type(1){transform: rotateY(0) translateZ(150px);}
ul li:nth-of-type(2){transform: rotateY(60deg) translateZ(150px);}
ul li:nth-of-type(3){transform: rotateY(120deg) translateZ(150px);}
ul li:nth-of-type(4){transform: rotateY(180deg) translateZ(150px);}
ul li:nth-of-type(5){transform: rotateY(240deg) translateZ(150px);}
ul li:nth-of-type(6){transform: rotateY(300deg) translateZ(150px);}
5.给图片容器li添加绝对定位，图片父容器ul添加相对定位  
position: absolute;
position: relative;
6.给图片容器li添加阴影和渐变效果(rgba设置透明度)
-webkit-box-reflect: below 10px linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.5)); 
7.给盒子box添加景深、3D效果和旋转时间、旋转规律
perspective: 400px;
transform-style: preserve-3d;
transition: 6s linear;
8.添加鼠标移到盒子发生旋转效果
.box:hover ul{transform: rotateY(360deg)}
9.给父容器box添加溢出隐藏
 overflow: hidden; 
10.最后效果，鼠标移到box盒子就会旋转