实现思路：
1.在页面只先实现8张图片，初始化
2.点击按钮执行的时间
a.点击控制每个按钮的颜色发生变化
b.从列表中获取八张图片，并未这些图片添加旋转的类名
c.图片的src要发生变化
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>随机旋转效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
margin-top: 10px;
background: radial-gradient(ellipse at center, #e9eadc 19%,#adaca2 100%);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Oswald, Arial;
text-align: center;
color: #47473c;
}
a {
color: #47473c;
font-family: Lobster;
font-style: normal;
text-decoration: none;
font-size: 15px;
}
a:hover {
text-decoration: underline;
}
h1 {
font-family: Lobster;
font-weight: normal;
margin: 0;
}
#container {
margin: 0 auto;
max-width: 856px;
perspective: 2000px;
}
#information {
margin-top: 1em;
display: block;
color: red;
font-size: 20px;
}
#navigation a {
display: inline-block;
line-height: 2.8em;
margin-right: 1em;
width: 40px;
height: 40px;
background: rgba(0,0,0,0.1);
color: #fff;
border-radius: 40px;
transition: .3s ease-in;
}
#navigation a.selected, #navigation a:hover {
background: rgba(0,0,0,.3);
text-decoration: none;
}
#portfolio-item {
display: none;
}
#portfolio {
margin: 10px 0;
transform-style: preserve-3d;
}
#portfolio div {
display: inline-block;
position: relative;
vertical-align: top;
margin: 1em;
width: 180px;
height: 140px;
box-shadow: 0px 0px 14px rgba(0,0,0,.3);
}
#portfolio div span {
text-align: left;
position: absolute;
color: #fff;
background: rgba(0,0,0,0.6);
width: 90px;
padding: 5px 15px 7px;
z-index: 1;
left: -10px;
bottom: 10px;
}
.animated {
transition: .9s ease-out;
transform: rotateX(360deg);
}
.flipped-horizontal-right {
transform: rotateY(360deg);
transition: .9s ease-out;
}
.flipped-horizontal-left {
transform: rotateY(-360deg);
transition: .9s ease-out;
}
.flipped-vertical-top {
transform: rotateX(360deg);
transition: .9s ease-out;
}
.flipped-vertical-bottom {
transform: rotateX(-360deg);
transition: .9s ease-out;
}
</style>
</head>
<body>
<div id="container">
<div id="portfolio"></div>
<ul id="portfolio-item">
<li><img src="images/dumptruck_teaser.jpeg" alt="Dump Truck" /></li>
<li><img src="images/rrwooo_rrwooo_teaser.jpeg" alt="Rrwooo" /></li>
<li><img src="images/dozer_teaser.jpeg" alt="Dozer" /></li>
<li><img src="images/ltah_teaser.jpeg" alt="Ltah" /></li>
<li><img src="images/pirates_teaser.jpeg" alt="Pirates" /></li>
<li><img src="images/rustler_teaser.jpeg" alt="Rustler" /></li>
<li><img src="images/satellite_teaser.jpeg" alt="Satellite" /></li>
<li><img src="images/werewolf_teaser.jpeg" alt="Werewolf" /></li>
<li><img src="images/box_socks_teaser.jpeg" alt="Box Socks" /></li>
<li><img src="images/capt_kidd_teaser.jpeg" alt="Capt Kidd" /></li>
<li><img src="images/bat_bedtime_teaser.jpeg" alt="Bat Bedtime" /></li>
<li><img src="images/grrr_teaser.jpeg" alt="Grrr" /></li>
<li><img src="images/eensy_teaser.jpeg" alt="Eensy" /></li>
<li><img src="images/derby_lady_teaser.jpeg" alt="Derby Lady" /></li>
<li><img src="images/carrot_teaser.jpeg" alt="Carrot" /></li>
<li><img src="images/brush_teaser.jpeg" alt="Brush" /></li>
<li><img src="images/nunatakdribbble_teaser.jpeg" alt="Nunatak" /></li>
<li><img src="images/reefdribbble_teaser.jpeg" alt="Reef" /></li>
<li><img src="images/glacier_teaser.jpeg" alt="Glacier" /></li>
<li><img src="images/carddribbble_teaser.jpeg" alt="Card" /></li>
<li><img src="images/cove_teaser.jpeg" alt="Cove" /></li>
<li><img src="images/canal_teaser.jpeg" alt="Canal" /></li>
<li><img src="images/shot_1300121080_teaser.jpeg" alt="Biome" /></li>
<li><img src="images/shot_1300969987_teaser.jpeg" alt="Globe" /></li>
<li><img src="images/bestican_teaser.jpeg" alt="Bestican" /></li>
<li><img src="images/bifocal_teaser.jpeg" alt="Bifocal" /></li>
<li><img src="images/soupsearch_teaser.jpeg" alt="Soup Search" /></li>
<li><img src="images/sub_teaser.jpeg" alt="Submarine" /></li>
<li><img src="images/tomatosoup_teaser.jpeg" alt="Tomato Soup" /></li>
<li><img src="images/harry_teaser.jpeg" alt="Hipster Harry" /></li>
<li><img src="images/for_the_man_teaser.jpeg" alt="For The Man" /></li>
<li><img src="images/extra_teaser.jpeg" alt="Indulgence" /></li>
</ul>
<nav id="navigation">
<a href="#1" class="nav selected" data-page="1">1</a>
<a href="#2" class="nav" data-page="2">2</a>
<a href="#3" class="nav" data-page="3">3</a>
<a href="#4" class="nav" data-page="4">4</a>
</nav>
</div>
<script type="text/javascript">
var portfolio = document.getElementById("portfolio");//拿到存放图片的div
var portfolio_item = document.getElementById("portfolio-item");//拿到无序列表
var nav = document.getElementsByClassName("nav");//拿到nav标签
var itemShow = 8;//总共有 八张图片
var navLength = nav.length;//获取nav的长度
//设置旋转的方向
var rotation = ['flipped-horizontal-right','flipped-horizontal-left','flipped-vertical-top','flipped-vertical-bottom'];
for(var i = 0; i <itemShow;i++){//遍历八张图片
aImg = portfolio_item.children[i].children[0];//拿到ul下面的li下面的图片
aImgSrc = aImg.getAttribute("src");//把图片的src属性赋值给aImgSrc
aImgAlt = aImg.getAttribute("alt");//把图片的alt属性赋值给aImgAlt
//循环创建div和span，并将div的背景图片设置为aImgSrc，将span的内容设置为aImgAlt
item = '<div style="background: url('+aImgSrc+')"><span>'+aImgAlt+'</span></div>';
portfolio.innerHTML += item;//将item拼接为div的内容
}
for(var i=0;i<navLength;i++){//循环遍点击按钮
nav[i].onclick = function(){//点击之后执行的方法
for(var j = 0;j < navLength; j++){//循环遍历
nav[j].className = 'nav';//颜色清空
}
this.className = 'nav selected';//当前的nav的类名为nav和selected
page = this.getAttribute('data-page');//拿到当前的id data-page
for(var k =0;k<itemShow;k++){//循环遍历八张图片
random = Math.floor(Math.random() * 4);//产生随机数，并向下取整 1 2 3 4
animation = rotation[random];//添加旋转效果
item = portfolio.children[k];//拿到ul标签
item.className = animation;//将ul的 类名设置为animation
window.setTimeout(function(index){//添加延时器
indexReal = index + 8 * (page-1);//计算出当前是哪张图片，总共32张
//拿到ul下面，li下面的Img标签
aImg = portfolio_item.children[indexReal].children[0];
aImgSrc = aImg.getAttribute('src');//拿到Img标签的属性src，并赋值给aImgSrc
aImgAlt = aImg.getAttribute('alt');//拿到Img标签的属性alt，并赋值给aImgAlt
aImgCurrent = portfolio.children[index];//拿到当前的div
aImgCurrent.style.background='url('+aImgSrc+')';//将当前的span内容设置为aImgAlt
aImgCurrent.children[0].innerHTML = aImgAlt;//将当前的div的背景图片设置为aImgSrc
}(k),500);//采用了闭包
item.addEventListener('transitionend',function(){
this.className = '';//当过渡结束之后，将类名清空
})
}
}
}
</script>
</body>
</html>
