CSS 折疊紙效果是一種很有趣的效果，它可以將一個(gè)普通的盒子，變得像是一張折疊紙一樣。這種效果可以讓你的頁(yè)面看起來(lái)更加有趣和生動(dòng)。下面我們來(lái)看一下如何實(shí)現(xiàn)這種效果。

.fold-box {
position: relative;
width: 200px;
height: 200px;
background-color: #f3f3f3;
border: 1px solid #ddd;
margin: 0 auto;
overflow: hidden;
}
.fold-box:before {
content: "";
position: absolute;
width: 105%;
height: 105%;
left: -2.5%;
top: -2.5%;
background-color: #fff;
transform: rotate(-30deg);
transform-origin: 0 0;
z-index: 2;
}
.fold-box:after {
content: "";
position: absolute;
width: 100%;
height: 50%;
left: 0;
top: 0;
background-color: #f3f3f3;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
transform: rotateX(45deg);
transform-origin: 50% 0;
z-index: 1;
}
.fold-box >div {
position: absolute;
width: 100%;
height: 50%;
left: 0;
background-color: #fff;
transform: rotateX(45deg);
transform-origin: 50% 100%;
z-index: 3;
}

以上是實(shí)現(xiàn)折疊紙效果的 CSS 代碼。首先要有一個(gè)容器，容器上使用 before 和 after 偽元素分別實(shí)現(xiàn)前面的白色疊層和后面的陰影。容器內(nèi)部再用一個(gè) div 來(lái)實(shí)現(xiàn)折疊的紙片，通過 rotateX 和 transform-origin 來(lái)實(shí)現(xiàn)紙片的折疊效果。整個(gè)效果的神奇之處，在于偽元素的 transform 屬性和容器內(nèi)部的紙片 div 的 transform 屬性組合起來(lái)，實(shí)現(xiàn)了折疊的效果。

通過使用這種 CSS 折疊紙效果，可以讓我們的網(wǎng)站更加生動(dòng)和有趣。如果您有興趣的話，可以嘗試在您的網(wǎng)站上應(yīng)用這個(gè)效果，相信會(huì)為您的用戶帶來(lái)很大的驚喜和樂趣。