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