CSS3的圖片碎片效果是一種非常炫酷的效果，能夠讓網頁的視覺效果更加生動，吸引人的眼球。

img {
overflow: hidden;
width: 200px;
height: 200px;
position: relative;
}
img::before {
content: "";
background-image: url("path/to/image.jpg");
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform-origin: top left;
animation: break 5s linear infinite;
}
@keyframes break {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}

以上的代碼實現了一種將圖片分解成小塊的效果。首先，對img標簽設置寬高和溢出隱藏屬性。然后，在img標簽的before偽元素上，設置背景圖以及其大小，使其完全覆蓋img標簽。將其溢出到了img標簽的外面，同時設置transform-origin屬性讓其以左上角為原點進行旋轉。最后，通過animation屬性設置了一個5秒旋轉360度的動畫效果，使其看起來像是圖片在分解。

總之，CSS3的圖片碎片效果雖然實現較為復雜，但它的奇妙效果仍然能夠為網頁增色不少。