一.构建页面
<div style="margin:40px auto;"> <div class="preload_img"> <img src="../assets/1.jpg"/> <img src="../assets/2.jpg"/> <img src="../assets/3.jpg"/> <img src="../assets/4.jpg"/> <img src="../assets/5.jpg"/> </div> <div class="container "> <div class="cover"> <img src="../assets/1.jpg"/> </div> <div class="transition flip1 perspective"> <div class="card"> <div class="front"><img src="../assets/5.jpg"/> </div> <div class="back"><img src="../assets/1.jpg"/> </div> </div> </div> </div> </div>
1.".preload_img"这个div下面主要是预加载一些图片,如果是放在网络上的话不至于会导致翻转过程中图片还未加载成功
2.".cover"的作用是当图片动画停止时覆盖显示出来,覆盖掉动画的图片
3.".transition"这个是主要动画区域,card是翻转的主要元素,front则是正面,back则是背面,需要注意的是,card一定要设置
.card{ -webkit-transform-style: preserve-3d; }
否则你对card进行的动画,并不影响它内部的元素。
back要旋转180度,这样才是真正的所谓背面
.back { -webkit-transform: rotate3d(1,0,0,-180deg); }
还要设置一个属性,当背面情况下,元素则不显示
.front, .back { -webkit-backface-visibility: hidden; }
4.就是布局,cover应该在transition这个元素的上方,布局我采用position:absolute,并且每个元素都要指定高度宽度,这个是比较笨的办法,但是比较精确,暂时也没有找到自动布局的方法,主要原因是position:absolute这个定位方式会导致外部父元素无法自动获取子元素的高度宽度,始终是0*0的尺寸。
5.其它CSS
.perspective { -webkit-perspective: 1000px; }
景深设置,让3D更加逼真
二.JS相关处理代码
$("body").bind("click", function() { var srcs = control.next(); $(".front").find("img").attr("src", srcs[0]); $(".back").find("img").attr("src", srcs[1]); nowSrc = 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() * 4) + 1); }); $(".cover").removeClass("hide").find("img").attr("src", nowSrc); } });
在触发事件中,将transition中加入Class "show",然后将.cover "hide",在动画结束的时候再将添加的class删除掉,并替换掉现在正在显示的图片就可以了
三.翻转效果CSS3
例子中有4种效果
/***************** Flip1 ********************/ .effect1.show .card{ -webkit-animation: flip1 1s ease-in-out forwards; } @-webkit-keyframes flip1{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 100% { -webkit-transform: rotate3d(1,0,0,-180deg); } } /****************** Flip2 *******************/ .effect2.show .card{ -webkit-animation: flip2 1s ease-in-out forwards; -webkit-transform-origin: 50% 0%; } @-webkit-keyframes flip2{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 100% { -webkit-transform: rotate3d(1,0,0,-180deg) translate3d(0,-430px,0); } } /****************** Flip3 *******************/ .effect3 .back { -webkit-transform: rotate3d(0,1,0,-180deg); } .effect3.show .card{ -webkit-animation: flip3 1s ease-in-out forwards; } @-webkit-keyframes flip3{ 0% { -webkit-transform: rotate3d(0,1,0,0); } 50% { -webkit-transform: rotate3d(0,1,0,-190deg); } 70% { -webkit-transform: rotate3d(0,1,0,-172deg); } 80% { -webkit-transform: rotate3d(0,1,0,-180deg); } 95% { -webkit-transform: rotate3d(0,1,0,-178deg); } 100% { -webkit-transform: rotate3d(0,1,0,-180deg); } } /****************** Flip4 *******************/ .effect4 .back{ -webkit-transform: rotate3d(0,1,0,-180deg); } .effect4.show .card{ -webkit-animation: flip4 1s ease-in-out forwards; -webkit-transform-origin: 100% 50%; } @-webkit-keyframes flip4{ 0% { -webkit-transform: rotate3d(0,1,0,0) ; } 100% { -webkit-transform: rotate3d(0,1,0,-180deg) translate3d(333px,0,0); } }