1、创建文件目录
在Hbuilder在新建一个目录，创建css和js文件。
图1
2、调背景色
在style块里面给整个页面渲染成黑色调。
*{padding:0px;margin:0px;}
/*这是为了消除默认dom元素的内外边距，使得我们写css的时候更精确*/
body{
background-color: #000;
}
3、制作3D相册
（1）画一个id为wrap的div作为相框来装载所有的图片。
<div id="wrap">
<img src="img/1.jpg" alt=""/>
<img src="img/2.jpg" alt=""/>
<img src="img/3.jpg" alt=""/>
<img src="img/4.jpg" alt=""/>
<img src="img/5.jpg" alt=""/>
<img src="img/6.jpg" alt=""/>
<img src="img/7.jpg" alt=""/>
<img src="img/8.jpg" alt=""/>
</div>
（2）为相框设置样式,用transform:rotateY(-10deg)为它设置旋转效果，用transform-style:preserve-3d来为图片设置3D效果。
#wrap{
width: 110px;
height: 180px;
margin: 350px auto;
transform-style: preserve-3d;
transform:rotateY(-10deg);
}
（3）为图片设置景深（景深：对好焦的范围。它能决定是把背景模糊化来突出拍摄对象，还是拍出清晰的背景）。
perspective:700px;
（4）给图片添加倒影效果。
img{
width: 110px;
height: 180px;
position: absolute;
box-shadow: 1px -1px 6px #666;
-webkit-box-reflect: below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
transition: 0.5s;
}
图2
4、将图片散开，围成一圈。
（1）让所有的图片分散开来，让每一张图片均匀地根据Y轴转过360度。
var photosDom = document.getElementById('wrap');
//获取图片数组
var images = photosDom.getElementsByTagName('img');
//获取图片数量
var len = images.length;
//计算每张图片按Y轴旋转的角度
var deg = Math.floor(360/ len);
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg)'; //deg前面不要加空格
}
效果如图：
图3
（2）编写js代码，让其中一张图片沿着它自己的Z轴向外移动。
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg)'; //deg前面不要加空格
if(i == 1){
images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(300px)';
}
}
效果如图：
（3）用js代码，在每一张图片根据Y轴旋转的时候，就让它沿着Z轴“飘”出来。
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格
}
（4）如果相册整体太水平了，可以用transform:rotateX(-10deg)让整个相册根据X轴向下移动10px，达到俯视的效果。
transform:rotateX(90deg);
5、绘制透明底盘
它是一个放在wrap里面的div，通过定位布局和css3特性就可以实现。
<div id="wrap">
<img src="img/1.jpg" alt=""/>
<img src="img/2.jpg" alt=""/>
<img src="img/3.jpg" alt=""/>
<img src="img/4.jpg" alt=""/>
<img src="img/5.jpg" alt=""/>
<img src="img/6.jpg" alt=""/>
<img src="img/7.jpg" alt=""/>
<img src="img/8.jpg" alt=""/>
<div></div>
</div>
#wrap div{
width:1200px;
height:1200px;
border-radius:50%;
position:absolute;
top:102%;
left:50%;
margin-left:-600px;
margin-top:-600px;
transform:rotateX(90deg);
background:-webkit-radial-gradient(center center,600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0));
}
6、最终效果
END主 编 | 王楠岚
责 编 | 江南沐雪
where2go 团队
微信号：算法与编程之美
