一.构建页面
页面构建思路和前一篇差不多。请移步《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; }}
