制作翻转效果动画

经测试改动画在移动端兼容有一些问题，要兼容移动端可前往https://blog.youkuaiyun.com/u012011360/article/details/92766950

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