基本思路来自于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>