制作翻转效果动画

女爷i 2022-08-04 04:08 229阅读 0赞

经测试改动画在移动端兼容有一些问题，要兼容移动端可前往[https://blog.csdn.net/u012011360/article/details/92766950][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);

效果如下：

![20150816153022973][]

还可以参考网址http://www.jb51.net/css/296946.html

[https_blog.csdn.net_u012011360_article_details_92766950]: https://blog.csdn.net/u012011360/article/details/92766950
[20150816153022973]: /images/20220731/001b084c366044048ca0b824b8fe728d.png