javascript - Kesan pengumpulan imej, ditambah dengan kesan 3D, mengapa terdapat garisan selepas pengumpulan?

Question

Satu p mengandungi banyak sub-p, dan imej latar belakang sub-p disatukan untuk membentuk keseluruhan gambar; untuk kesan pengumpulan, saya menambah kesan penyongsangan paksi-y 3D tengah bila splicing? Logiknya gathering sepatutnya begini

Hasilnya begini

Dilampirkan kod

.pic{lebar: 1000px;tinggi: 655px;kedudukan: mutlak;kiri: 0;kanan: 0;atas: 0;bawah: 0;margin: auto;latar belakang: tan;transform-style: preserve - 3d;perspektif: 500px;}

    .item{position: absolute;}

<p class="pic"></p>

<skrip>

for (var i=0;i<240;i++){
    $('<p class="item"></p>').css({
        'width':1000/24+'px',
        'height':655/10+'px',
        'background-image':'url(images/meinv.jpg)'
    }).appendTo('.pic');
}
$('.item').each(function(index){
    var x=index%24;
    var y=parseInt(index/24);
    var randomX=Math.random()*800-400;
    var randomY=Math.random()*800-400;
    $(this).css({'background-position':-x*(1000/24)+"px "+-y*(655/10)+"px",'left':x*(1000/24),'top':y*(655/10), 'transform':"translate("+x*randomX+"px,"+y*randomY+"px) rotate(360deg) scale(0.2) "}).hide()
});
var bol=true;
$('.pic').click(function (){
    if (bol) {
        $('.item').each(function(){
        var random=Math.random()*3+2;
        $(this).fadeIn().css({'transform':'translate(0) rotate(0deg) scale(1) ','transition':'all '+random+'s ease-in-out'})
        })
    }else{
        console.log(1)
        $('.item').each(function(index){
            var x=index%24;
            var y=parseInt(index/24);
            var randomX=Math.random()*800-400;
            var randomY=Math.random()*800-400;
            $(this).css({'left':x*(1000/24),'top':y*(655/10), 'transform':"translate("+x*randomX+"px,"+y*randomY+"px) rotate(360deg) scale(0.2) rotateY(180deg)"}).fadeOut()
        })
    }
    bol=!bol
})

</skrip>

Answer 1

Pastikan paparan pelayar tidak dizum masuk! ctrl + 0 cuba.