我一共准备了8张图片，现在将剩余的图片也添加进来。

<div id="photos"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> <img src="img/7.jpg" /> <img src="img/8.jpg" /> </div>

到目前为止，所有的图片都是叠在一起的，我们思考如何将他们分散开来，围城一圈呢?

4.将图片散开，围成一圈

在3维坐标中，不仅有X轴，Y轴，还有Z轴。我们首先要明白Z轴是什么概念，Y轴是左右旋转，上面已经演示过了，不难想到X轴应该就是上下旋转，那么Z轴呢？

我们先把倒影去掉，看起来清楚些。

/*-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));*/

好，让我们来一探究竟：

 

 

哇，原来如此！

Z轴就是垂直于横切面的一条轴！

我们现在不需要绕着Z轴旋转，试试让相册沿着Z轴移动一段距离如何?

translateZ可以帮我们实现这一个效果。

回到正题。

我们的目的是让所有的图片分散开来，那么第一步就是让每一张图片均匀地根据Y轴转过一个角度。这个角度是多少呢？

一圈是360度，除以图片的张数，就是每一张图片转过的角度了。

我们用js来实现：

var photosDom = document.getElementById('photos'); //获取图片数组 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前面不要加空格 }

代码是比较明了的，就是一个除法运算，然后给每一张图片增加一个旋转样式即可。

效果：

 

 

可见，每一张图片都转过了一定的角度。

也就是说，这个时候，每张图片的Z轴都不一样了！

如果你还是觉得有难度，没关系，我们拿其中一张图片来举例，让它沿着它自己的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)'; } }

 

 

显而易见了，就是这么回事，那么解决方案自己就出来了，我们只需要在每一张图片根据Y轴旋转的时候，就让它沿着Z轴“飘”出来就可以啦！

距离稍微大一点，就380px吧。

for(var i = 0; i < len;i++){ images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格 }

 

 

这样有点太水平了，我们让整个相册往下一点，达到一种稍微有点俯视的效果。让相册根据X轴往下移动个10px就可以了哦。

transform:rotateX(-10deg);

 

 

这样效果就出来了。

5.绘制透明酷炫底盘

本案例中，在相册底部，还有一个透明的底盘，现在我们开始实现这个效果。

<div id="photos"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> <img src="img/7.jpg" /> <img src="img/8.jpg" /> <div></div> </div>

其实，它就是一个放在photos里面的div。我们通过定位布局和css3特性就可以实现了。

上代码：

#photos 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)); }

top属性是一点点调出来的，你也可以用浏览器的调试模式一点点来调整高度。

效果：

 

 

6.自动旋转