一個p裡裝很多子p，子p背景圖合在一起拼成一整張圖；聚攏效果我加上3D y軸反轉效果為啥就拼接的時候中間有了細縫
按道理來說聚攏後應該是這樣
結果是這樣
附上程式碼
.pic{width: 1000px;height: 655px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: tan;transform- style: preserve-3d;perspective: 500px;}
.item{position: absolute;}<p class="pic"></p>
<script>
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
})
</script>
