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>