CSS3D是CSS3中的一個模塊，其允許開發者使用CSS實現3D效果。其中CSS3D折紙效果是該模塊中的一個非常有趣的效果。

要實現CSS3D折紙效果，需要使用transform-style屬性設置為preserve-3d，這樣子元素就可以在3D空間中添加transform效果了。然后我們可以使用rotate和translate對元素進行旋轉和移動，達到折紙的效果。

.cube{
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
.cube .front, .cube .back, .cube .right, .cube .left, .cube .top, .cube .bottom{
position: absolute;
width: 200px;
height: 200px;
background: #ccc;
border: 1px solid #999;
line-height: 200px;
text-align: center;
font-size: 36px;
font-weight: bold;
}
.cube .front{
transform: translateZ(100px);
}
.cube .back{
transform: translateZ(-100px) rotateX(180deg);
}
.cube .right{
transform: rotateY(90deg) translateX(100px);
}
.cube .left{
transform: rotateY(-90deg) translateX(-100px);
}
.cube .top{
transform: rotateX(90deg) translateY(-100px);
}
.cube .bottom{
transform: rotateX(-90deg) translateY(100px);
}
.cube:hover .front{
transform: translateZ(50px) rotateX(-180deg);
}
.cube:hover .back{
transform: translateZ(-50px);
}
.cube:hover .right{
transform: rotateY(90deg) translateZ(-50px);
}
.cube:hover .left{
transform: rotateY(-90deg) translateZ(-50px);
}
.cube:hover .top{
transform: rotateX(90deg) translateZ(-50px);
}
.cube:hover .bottom{
transform: rotateX(-90deg) translateZ(-50px);
}

上述代碼實現了一個立方體的折紙效果，鼠標經過時不同面會被拍扁，有種3D折紙的效果。這樣的效果在一些需要炫酷3D效果的展示頁面或者游戲中可以有很好的應用。