制作翻转效果动画

本文主要是介绍制作翻转效果动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

html页面：

</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);

效果如下：