制作翻转效果动画

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