css3 transition effect(Flip翻转效果)

一.构建页面

        <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); 
}
}