3D折纸效果在网站设计中非常流行，可以增强页面的可视性和吸引力。CSS技术可以轻松实现这种效果，本文就来介绍一下CSS的相关代码。

.fold {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform-origin: center;
transform: perspective(600px) rotateX(45deg);
}
.fold .front,
.fold .back {
position: absolute;
width: 100%;
height: 100%;
background-color: #f0f0f0;
backface-visibility: hidden;
}
.fold .front:before,
.fold .back:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #333;
}
.fold .front:before {
transform-origin: bottom;
transform: rotateX(-90deg) translateZ(100px);
}
.fold .back:before {
transform-origin: top;
transform: rotateX(90deg) translateZ(100px);
}

上面的代码利用了CSS的transform属性和perspective函数，设置了一个透视角度，让元素具有视觉深度。同时，利用了:before选择器，添加了折叠面的样式。

添加折叠面的方法是，先添加一个位置为absolute的div元素，设置宽高100%和背景色，然后使用:before选择器，添加一个内容为空的伪元素，设置位置和宽高等样式，并使用transform属性，将其翻折起来。为了让折叠面更真实，还可以在伪元素中添加阴影效果。

最后，我们将两个折叠面用一个外层div包裹，设置transform-style属性为preserve-3d，表示将其子元素视为具有三维空间属性的元素，从而实现3D折纸效果。

通过以上代码，我们可以轻松实现3D折纸效果，为网站设计增添活力。