background 旋转_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盒子就会旋转

https://www.zhihu.com/video/1229824060680368128