CSS3技術可以實現許多炫酷的效果，其中之一就是散亂的堆積。使用CSS3，你可以實現一個看似無序的堆疊效果，給網頁增添一份趣味性。

/* CSS3代碼 */
.container {
position: relative;
width: 600px;
height: 400px;
}
.card {
position: absolute;
width: 150px;
height: 200px;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.card:hover {
transform: scale(1.1);
z-index: 1;
}
.card:nth-child(1) {
top: 50px;
left: 50px;
}
.card:nth-child(2) {
top: 100px;
left: 100px;
}
.card:nth-child(3) {
top: 150px;
left: 150px;
}
.card:nth-child(4) {
top: 200px;
left: 200px;
}

上面的代碼是實現散亂堆疊效果的核心代碼。首先，我們為包含卡片的容器設置了相對定位，以便后面的絕對定位可以參照它來定位。

.container {
position: relative;
width: 600px;
height: 400px;
}

然后，我們為卡片添加了絕對定位，具體位置根據nth-child()偽類來設置。

.card {
position: absolute;
width: 150px;
height: 200px;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.card:nth-child(1) {
top: 50px;
left: 50px;
}
.card:nth-child(2) {
top: 100px;
left: 100px;
}
.card:nth-child(3) {
top: 150px;
left: 150px;
}
.card:nth-child(4) {
top: 200px;
left: 200px;
}

我們為每個卡片添加了過渡效果，當鼠標懸停在卡片上時，卡片會放大并出現在其他卡片上方。

.card:hover {
transform: scale(1.1);
z-index: 1;
}

最終效果會讓用戶有一種卡片堆成的感覺。如果你有興趣，可以嘗試自己調整容器和卡片的大小、位置以及背景顏色等參數，讓效果更適合你的網頁風格。