css3 transition split(分裂旋转效果)

一.构建页面

<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 effect1 perspective">                    <div class="card p1">                        <div class="front"><img src="../assets/5.jpg"/>                        </div>                        <div class="back"><img src="../assets/1.jpg"/>                        </div>                    </div>                    <div class="card p2">                        <div class="front"><img src="../assets/5.jpg"/>                        </div>                        <div class="back"><img src="../assets/1.jpg"/>                        </div>                    </div>                    <div class="card p3">                        <div class="front"><img src="../assets/5.jpg"/>                        </div>                        <div class="back"><img src="../assets/1.jpg"/>                        </div>                    </div>                    <div class="card p4">                        <div class="front"><img src="../assets/5.jpg"/>                        </div>                        <div class="back"><img src="../assets/1.jpg"/>                        </div>                    </div>                    <div class="card p5">                        <div class="front"><img src="../assets/5.jpg"/>                        </div>                        <div class="back"><img src="../assets/1.jpg"/>                        </div>                    </div>                    <div class="card p6">                        <div class="front"><img src="../assets/5.jpg"/>                        </div>                        <div class="back"><img src="../assets/1.jpg"/>                        </div>                    </div>                    <div class="card p7">                        <div class="front"><img src="../assets/5.jpg"/>                        </div>                        <div class="back"><img src="../assets/1.jpg"/>                        </div>                    </div>                </div>            </div>        </div>

页面构建思路和之前差不多，只不过分裂的效果只是利用img的偏移量，将图片一个个分割成一小部分。每个card + p就标识图片的一部分，一共7个部分，所以就实现了一个图片似乎分裂消失和分裂合并的效果。

同样的，如果要解决一些图片闪烁问题，最好给".front"和".class"加上z-index,这样可以保证front始终再back前面，就解决了在动画过程中出现的图片闪烁现象。

二.js相关代码

类似于flip的效果，详细请见页面构建思路和前一篇差不多。请移步《css3 transition effect(Flip翻转效果)》

三.CSS3 transition 效果

/***************** Multiflip1 ********************/.effect1 .back{-webkit-transform: rotate3d(1,0,0,-180deg);}.effect1.show .card{-webkit-animation-duration: 1.5s;-webkit-animation-timing-function: ease-in-out;-webkit-animation-fill-mode: forwards;}.effect1 .p1{z-index: 1;-webkit-animation-name: multiflip1_4;}.effect1 .p2{z-index: 2;-webkit-animation-name: multiflip1_3;}.effect1 .p3{z-index: 3;-webkit-animation-name: multiflip1_2;}.effect1 .p4{z-index: 4;-webkit-animation-name: multiflip1_1;}.effect1 .p5{z-index: 3;-webkit-animation-name: multiflip1_2;}.effect1 .p6{z-index: 2;-webkit-animation-name: multiflip1_3;}.effect1 .p7{z-index: 1;-webkit-animation-name: multiflip1_4;}@-webkit-keyframes multiflip1_1{0% { -webkit-transform: rotate3d(1,0,0,0); }60% { -webkit-transform: rotate3d(1,0,0,-180deg); }100% { -webkit-transform: rotate3d(1,0,0,-180deg); }}@-webkit-keyframes multiflip1_2{0% { -webkit-transform: rotate3d(1,0,0,0); }10% { -webkit-transform: rotate3d(1,0,0,0); }70% { -webkit-transform: rotate3d(1,0,0,-180deg); }100% { -webkit-transform: rotate3d(1,0,0,-180deg); }}@-webkit-keyframes multiflip1_3{0% { -webkit-transform: rotate3d(1,0,0,0); }20% { -webkit-transform: rotate3d(1,0,0,0); }80% { -webkit-transform: rotate3d(1,0,0,-180deg); }100% { -webkit-transform: rotate3d(1,0,0,-180deg); }}@-webkit-keyframes multiflip1_4{0% { -webkit-transform: rotate3d(1,0,0,0); }30% { -webkit-transform: rotate3d(1,0,0,0); }90% { -webkit-transform: rotate3d(1,0,0,-180deg); }100% { -webkit-transform: rotate3d(1,0,0,-180deg); }}/***************** Multiflip2 ********************/.effect2 .back{-webkit-transform: rotate3d(1,0,0,-180deg);}.effect2.show .card{-webkit-animation-duration: 1.5s;-webkit-animation-timing-function: ease-in-out;-webkit-animation-fill-mode: forwards;}.effect2 .p1{z-index: 1;-webkit-animation-name: multiflip2_1;}.effect2 .p2{z-index: 2;-webkit-animation-name: multiflip2_2;}.effect2 .p3{z-index: 3;-webkit-animation-name: multiflip2_3;}.effect2 .p4{z-index: 4;-webkit-animation-name: multiflip2_4;}.effect2 .p5{z-index: 3;-webkit-animation-name: multiflip2_5;}.effect2 .p6{z-index: 2;-webkit-animation-name: multiflip2_6;}.effect2 .p7{z-index: 1;-webkit-animation-name: multiflip2_7;}@-webkit-keyframes multiflip2_1{0% { -webkit-transform: rotate3d(1,0,0,0); }30% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0);}60% { -webkit-transform: rotate3d(1,0,0,180deg); }100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }}@-webkit-keyframes multiflip2_2{0% { -webkit-transform: rotate3d(1,0,0,0); }5% { -webkit-transform: rotate3d(1,0,0,0); }35% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }65% { -webkit-transform: rotate3d(1,0,0,180deg); }100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }}@-webkit-keyframes multiflip2_3{0% { -webkit-transform: rotate3d(1,0,0,0); }10% { -webkit-transform: rotate3d(1,0,0,0);  }40% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }70% { -webkit-transform: rotate3d(1,0,0,180deg); }100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }}@-webkit-keyframes multiflip2_4{0% { -webkit-transform: rotate3d(1,0,0,0); }15% { -webkit-transform: rotate3d(1,0,0,0); }45% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }75% { -webkit-transform: rotate3d(1,0,0,180deg); }100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }}@-webkit-keyframes multiflip2_5{0% { -webkit-transform: rotate3d(1,0,0,0); }20% { -webkit-transform: rotate3d(1,0,0,0); }50% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }80% { -webkit-transform: rotate3d(1,0,0,180deg); }100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }}@-webkit-keyframes multiflip2_6{0% { -webkit-transform: rotate3d(1,0,0,0); }25% { -webkit-transform: rotate3d(1,0,0,0); }55% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }85% { -webkit-transform: rotate3d(1,0,0,180deg); }100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }}@-webkit-keyframes multiflip2_7{0% { -webkit-transform: rotate3d(1,0,0,0); }30% { -webkit-transform: rotate3d(1,0,0,0); }60% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }90% { -webkit-transform: rotate3d(1,0,0,180deg); }100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }}/***************** Multiflip3 ********************/.effect3 .back{-webkit-transform: rotate3d(0,1,0,-180deg);}.effect3.show .card{-webkit-animation-duration: 1.5s;-webkit-animation-timing-function: ease-in-out;-webkit-animation-fill-mode: forwards;-webkit-transform-origin: 0% 50%;}.effect3 .p1{z-index: 1;-webkit-animation-name: multiflip3_1;}.effect3 .p2{z-index: 2;-webkit-animation-name: multiflip3_2;}.effect3 .p3{z-index: 3;-webkit-animation-name: multiflip3_3;}.effect3 .p4{z-index: 4;-webkit-animation-name: multiflip3_4;}.effect3 .p5{z-index: 3;-webkit-animation-name: multiflip3_5;}.effect3 .p6{z-index: 2;-webkit-animation-name: multiflip3_6;}.effect3 .p7{z-index: 1;-webkit-animation-name: multiflip3_7;}@-webkit-keyframes multiflip3_1{0% { -webkit-transform: rotate3d(0,1,0,0); }60% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }}@-webkit-keyframes multiflip3_2{0% { -webkit-transform: rotate3d(0,1,0,0); }5% { -webkit-transform: rotate3d(0,1,0,0); }65% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }}@-webkit-keyframes multiflip3_3{0% { -webkit-transform: rotate3d(0,1,0,0); }10% { -webkit-transform: rotate3d(0,1,0,0);  }70% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }}@-webkit-keyframes multiflip3_4{0% { -webkit-transform: rotate3d(0,1,0,0); }15% { -webkit-transform: rotate3d(0,1,0,0); }75% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }}@-webkit-keyframes multiflip3_5{0% { -webkit-transform: rotate3d(0,1,0,0); }20% { -webkit-transform: rotate3d(0,1,0,0); }80% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }}@-webkit-keyframes multiflip3_6{0% { -webkit-transform: rotate3d(0,1,0,0); }25% { -webkit-transform: rotate3d(0,1,0,0); }85% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }}@-webkit-keyframes multiflip3_7{0% { -webkit-transform: rotate3d(0,1,0,0); }30% { -webkit-transform: rotate3d(0,1,0,0); }90% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }}