学步园

一.构建页面

页面构建思路和前一篇差不多。请移步《css3 transition effect(Flip翻转效果)》

由于flip存在翻转时候的效果，需要设置背面情况下不显示的CSS，但是揭开的话不需要，所以不要设置-webkit-backface-visibility: hidden;
否则会出现翻转到超过90度后，动画就会消失的情况。

最好设置下动画中.front和.back的z-index,

.back {
    z-index: 1;
}
.front {
    z-index: 2;
}

二.JS相关处理代码

    var nowSrc,nextSrc;
    var control = showNext(5, 2, "../assets/%@.jpg");
    //init assets
    $(".front").find("img").attr("src", "../assets/1.jpg");
    $(".back").find("img").attr("src", "../assets/2.jpg");
    $("body").bind("click", function() {
        var srcs = control.next();
        //$(".front").find("img").attr("src", srcs[0]);
        //$(".back").find("img").attr("src", srcs[1]);
        nowSrc = srcs[0];
        nextSrc=srcs[1];
        console.log(srcs);
        $(".transition").addClass("show");
        $(".cover").addClass("hide");
    });
    $(".transition").bind({
        'webkitAnimationStart' : function(event) {
            //alert("start");
        },
        'webkitAnimationEnd' : function(event) {
            //alert("end");
            $(".transition").removeClass().addClass("transition perspective").toggleClass(function() {
                return "effect" + (Math.floor(Math.random() * 5) + 1);
                // return "effect3";
            });
            $(".cover").removeClass("hide").find("img").attr("src", nowSrc);
            $(".front").find("img").attr("src", nowSrc);
            $(".back").find("img").attr("src",nextSrc);
        }
    });

与flip最大的区别在于，揭开后，back的页面是需要在原来地方显示着或者是一个渐入的效果，而不是跟着一起动，所以触发事件的时候我们并不需要设置.font和.back的图片内容。

三.揭开效果CSS3

/***************** Rotation1 ********************/
.effect1.show .front,
.effect1.show .back{
-webkit-transform-origin: 50% 100%;
}
.effect1.show .front{
-webkit-animation: rotationFront1 0.8s linear;
}
.effect1.show .back {
-webkit-animation: rotationBack1 0.8s linear;
}
@-webkit-keyframes rotationFront1{
0% { -webkit-transform: rotate3d(1,0,0,0); opacity: 1; }
50% { -webkit-transform: rotate3d(1,0,0,-90deg); opacity: 0.5; }
100% { -webkit-transform: rotate3d(1,0,0,-180deg); opacity: 0; }
}
@-webkit-keyframes rotationBack1{
0% { opacity: 0; rotate3d(1,0,0,90deg); }
30% { -webkit-transform: rotate3d(1,0,0,90deg); opacity: 0; }
100% { -webkit-transform: rotate3d(1,0,0,0); opacity: 1;}
}
/***************** Rotation2 ********************/
.effect2.show .front{
-webkit-animation: rotationFront2 0.8s linear;
-webkit-transform-origin: 50% 100%;
}
@-webkit-keyframes rotationFront2{
0% { -webkit-transform: rotate3d(1,0,0,0); opacity: 1; }
50% { -webkit-transform: rotate3d(1,0,0,-90deg); opacity: 1; }
90% { -webkit-transform: rotate3d(1,0,0,-260deg); opacity: 0; }
100% { -webkit-transform: rotate3d(1,0,0,-270deg); opacity: 0; }
}
/***************** Rotation3 ********************/
.effect3.show .front{
-webkit-animation: rotationFront3 0.8s linear;
-webkit-transform-origin: 100% 50%;
}
@-webkit-keyframes rotationFront3{
0% { -webkit-transform: rotate3d(0,1,0,0); opacity: 1; }
50% { -webkit-transform: rotate3d(0,1,0,90deg); opacity: 1; }
100% { -webkit-transform: rotate3d(0,1,0,180deg); opacity: 0; }
}
/***************** Rotation4 ********************/
.effect4.show .front,
.effect4.show .back{
-webkit-transform-origin: 0% 50%;
}
.effect4.show .front{
-webkit-animation: rotationFront4 0.8s linear;
}
.effect4.show .back {
-webkit-animation: rotationBack4 0.8s ease-in-out;
}
@-webkit-keyframes rotationFront4{
0% { -webkit-transform: rotate3d(0,1,0,0); opacity: 1; -webkit-animation-timing-function: ease-in;}
30% { -webkit-transform: rotate3d(0,1,0,-90deg); opacity: 0.5; -webkit-animation-timing-function: ease-out;}
100% { -webkit-transform: rotate3d(0,1,0,-180deg); opacity: 0; }
}
@-webkit-keyframes rotationBack4{
0% { opacity: 0; rotate3d(0,1,0,90deg); }
30% { -webkit-transform: rotate3d(0,1,0,90deg); opacity: 0; }
60% { -webkit-transform: rotate3d(0,1,0,-13deg); opacity: 1; }
70% { -webkit-transform: rotate3d(0,1,0,8deg); opacity: 1; }
80% { -webkit-transform: rotate3d(0,1,0,0deg); opacity: 1; }
95% { -webkit-transform: rotate3d(0,1,0,3deg); opacity: 1; }
100% { -webkit-transform: rotate3d(0,1,0,0deg); opacity: 1; }
}
/***************** Rotation5 ********************/
.effect5.show .front{
-webkit-transform-origin: 0% 50%;
}
.effect5.show .front{
-webkit-animation: rotationFront5 0.8s linear;
}
@-webkit-keyframes rotationFront5{
0% { -webkit-transform: rotate3d(0,1,0,0); opacity: 1;}
50% { -webkit-transform: translateX(-200px) translateZ(100px) rotate3d(0,1,0,-120deg); opacity: 0.5; }
100% { -webkit-transform: translateX(-400px) translateZ(200px) rotate3d(0,1,0,-240deg); opacity: 0; }
}