js 翻牌活动效果

直接上代码

html:

<div class="index_main">
    <ul class="index_card">
        <li class="one"><img src="{:ADDON_APP_PATH}/img/card.png" /></li>
        <li class="two"><img src="{:ADDON_APP_PATH}/img/card.png" /></li>
        <li class="third"><img src="{:ADDON_APP_PATH}/img/card.png" /></li>
    </ul>
</div>

界面css:

.index_main{ margin:  25px; padding-top: 15px;}
.index_card{ position: relative; height: 122px;}
.index_card li{ width: %; padding:  1.5%; position: absolute; top: ;}
.index_card li img{ width: %; display: block;}
.index_card .one{ left: ;}
.index_card .two{ left: %;}
.index_card .third{ left: %;}
.index_card .one.choose{ z-index: ;
    animation: onePlay 1s linear ;
    -webkit-animation: onePlay 1s linear ;
    -moz-animation: onePlay 1s 0s linear ;
}
.index_card .two.choose{ z-index: ;
    animation: twoPlay 1s linear ;
    -webkit-animation: twoPlay 1s linear ;
    -moz-animation: twoPlay 1s 0s linear ;
}
.index_card .third.choose{ z-index: ;
    animation: thirdPlay 1s linear ;
    -webkit-animation: thirdPlay 1s linear ;
    -moz-animation: thirdPlay 1s 0s linear ;
}

旋转css:(做了兼容的，可以放心使用)

/*动画*/
@keyframes onePlay{
    %   { left: %; transform:scale() rotateY(0deg);}
    %  { left: %; transform:scale(1.1) rotateY(180deg);}
    %  { left: %; transform:scale(1.2) rotateY(0deg);}
    %  { left: %; transform:scale(1.3) rotateY(180deg);}
    %  { left: %; transform:scale(1.4) rotateY(0deg);}
    % { left: %; transform:scale(1.5) rotateY(180deg);}
}
@-webkit-keyframes onePlay{
    %   { left: %; -webkit-transform:scale() rotateY(0deg);}
    %  { left: %; -webkit-transform:scale(1.1) rotateY(180deg);}
    %  { left: %; -webkit-transform:scale(1.2) rotateY(0deg);}
    %  { left: %; -webkit-transform:scale(1.3) rotateY(180deg);}
    %  { left: %; -webkit-transform:scale(1.4) rotateY(0deg);}
    % { left: %; -webkit-transform:scale(1.5) rotateY(180deg);}
}
@-moz-keyframes onePlay{
    %   { left: %; -moz-transform:scale() rotateY(0deg);}
    %  { left: %; -moz-transform:scale(1.1) rotateY(180deg);}
    %  { left: %; -moz-transform:scale(1.2) rotateY(0deg);}
    %  { left: %; -moz-transform:scale(1.3) rotateY(180deg);}
    %  { left: %; -moz-transform:scale(1.4) rotateY(0deg);}
    % { left: %; -moz-transform:scale(1.5) rotateY(180deg);}
}

@keyframes twoPlay{
    %   { transform:scale() rotateY(0deg);}
    %  { transform:scale(1.1) rotateY(180deg);}
    %  { transform:scale(1.2) rotateY(0deg);}
    %  { transform:scale(1.3) rotateY(180deg);}
    %  { transform:scale(1.4) rotateY(0deg);}
    % { transform:scale(1.5) rotateY(180deg);}
}
@-webkit-keyframes twoPlay{
    %   { -webkit-transform:scale() rotateY(0deg);}
    %  { -webkit-transform:scale(1.1) rotateY(180deg);}
    %  { -webkit-transform:scale(1.2) rotateY(0deg);}
    %  { -webkit-transform:scale(1.3) rotateY(180deg);}
    %  { -webkit-transform:scale(1.4) rotateY(0deg);}
    % { -webkit-transform:scale(1.5) rotateY(180deg);}
}
@-moz-keyframes twoPlay{
    %   { -moz-transform:scale() rotateY(0deg);}
    %  { -moz-transform:scale(1.1) rotateY(180deg);}
    %  { -moz-transform:scale(1.2) rotateY(0deg);}
    %  { -moz-transform:scale(1.3) rotateY(180deg);}
    %  { -moz-transform:scale(1.4) rotateY(0deg);}
    % { -moz-transform:scale(1.5) rotateY(180deg);}
}

@keyframes thirdPlay{
    %   { left: %; transform:scale() rotateY(0deg);}
    %  { left: %; transform:scale(1.1) rotateY(180deg);}
    %  { left: %; transform:scale(1.2) rotateY(0deg);}
    %  { left: %; transform:scale(1.3) rotateY(180deg);}
    %  { left: %; transform:scale(1.4) rotateY(0deg);}
    % { left: %; transform:scale(1.5) rotateY(180deg);}
}
@-webkit-keyframes thirdPlay{
    %   { left: %; -webkit-transform:scale() rotateY(0deg);}
    %  { left: %; -webkit-transform:scale(1.1) rotateY(180deg);}
    %  { left: %; -webkit-transform:scale(1.2) rotateY(0deg);}
    %  { left: %; -webkit-transform:scale(1.3) rotateY(180deg);}
    %  { left: %; -webkit-transform:scale(1.4) rotateY(0deg);}
    % { left: %; -webkit-transform:scale(1.5) rotateY(180deg);}
}
@-moz-keyframes thirdPlay{
    %   { left: %; -moz-transform:scale() rotateY(0deg);}
    %  { left: %; -moz-transform:scale(1.1) rotateY(180deg);}
    %  { left: %; -moz-transform:scale(1.2) rotateY(0deg);}
    %  { left: %; -moz-transform:scale(1.3) rotateY(180deg);}
    %  { left: %; -moz-transform:scale(1.4) rotateY(0deg);}
    % { left: %; -moz-transform:scale(1.5) rotateY(180deg);}
}

js:

这里讲原理就好了，大家自己多去思考。这里通过点击，然后在你点击的那张图片增加“choose”这个className.这样就触发了动态的样式，最后当你设置一个setTimeOut，让你的图片显示，最后把“choose”这个className从那张图片上去除掉，就可以了。