基本思路來自於CSS3 transform3D 圖片翻轉效果一貼
基於上帖基本實現一個3D 圖片翻轉效果demo，爲了再加一個延時便成爲下圖效果：
代碼如下：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JavaScript Study</title>
<style>
body,figure {
margin: 0;
padding: 0;
}
.stage {
width: 200px;
height: 100px;
margin: 40px;
perspective: 1000px;
}
.flipBox {
margin-top: 8px;
width: 200px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.pic {
width: 200px;
height: 100px;
font-size: 24px;
color: #fff;
line-height: 100px;
text-align: center;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.front {
background: #f00;
}
.back {
background: #090;
transform: rotateX(180deg);
}
.anmial {
transform: rotateX(-180deg);
/*transition: transform 0.5s EaseIn;*/
}
</style>
</head>
<body>
<div class="stage">
<div class="flipBox">
<figure class="pic front">1</figure>
<figure class="pic back">2</figure>
</div>
<div class="flipBox">
<figure class="pic front">2</figure>
<figure class="pic back">3</figure>
</div>
<div class="flipBox">
<figure class="pic front">3</figure>
<figure class="pic back">4</figure>
</div>
<div class="flipBox">
<figure class="pic front">4</figure>
<figure class="pic back">5</figure>
</div>
<div class="flipBox">
<figure class="pic front">5</figure>
<figure class="pic back">6</figure>
</div>
</div>
</body>
</html>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$.each($('.flipBox'), function(i,n) {
setTimeout(function(){
$('.flipBox').eq(i).addClass('anmial');
},i*500)
});
})
</script>