html页面：
<div class="box start_3_1" title="点击翻面">
<img src="images/bg1.jpg" alt="纸牌正面" class="list flip" />
<img src="images/1.jpg" alt="纸牌背面" class="list flip out" />
</div>
css样式：
.list {
position: absolute;
z-index:20000;
}
.flip {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);
backface-visibility: hidden;
transform: translateX(0);
}
.flip.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-webkit-animation-duration: 175ms;
transform: rotateY(-90deg) scale(.9);
animation-name: flipouttoleft;
animation-duration: 175ms;
}
.flip.in {
-webkit-animation-name: flipintoright;
-webkit-animation-duration: 225ms;
animation-name: flipintoright;
animation-duration: 225ms;
}
@-webkit-keyframes flipouttoleft {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-90deg); }
}
@keyframes flipouttoleft {
from { transform: rotateY(0); }
to { transform: rotateY(-90deg); }
}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg); }
to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoright {
from { transform: rotateY(90deg); }
to { transform: rotateY(0); }
}
js部分：
setInterval(function(){
$(".start_3_1 img").eq(0).removeClass("in").addClass("out");
$(".start_3_1 img").eq(1).removeClass("out").addClass("in");
setTimeout(function(){
$(".start_3_1 img").eq(0).removeClass("out").addClass("in");
$(".start_3_1 img").eq(1).removeClass("in").addClass("out");
},2500);
},4000);
效果例如以下：
还能够參考网址http://www.jb51.net/css/296946.html