3D CSS效果是一種在網頁設計中越來越常用的技術。它可以為網頁添加生動、立體、且令人驚嘆的形象，增強動態體驗。下面，我們就來介紹一些常用的3D CSS效果：

//首先，我們先給元素添加3D效果
.box {
transform-style: preserve-3d; //保持3D效果
}
//接下來，我們添加旋轉效果
.box:hover {
transform: rotateY(180deg); //繞Y軸旋轉180度
transition: all 0.5s ease; //添加過渡效果
}
//然后，我們可以添加翻轉效果
.flip-box {
position: relative;
perspective: 1000px; //透視度
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg); //繞Y軸旋轉180度
}
.flip-box-inner {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.5s;
transform-style: preserve-3d;
}
//最后，我們可以添加立方體效果
.cube {
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
}
.cube-face {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.7;
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateX(180deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.top {
transform: rotateX(-90deg) translateZ(100px);
}
.bottom {
transform: rotateX(90deg) translateZ(100px);
}

以上是常用的三種3D CSS效果，不同的效果需要不同的CSS代碼，同時，也需要適當的過渡效果來緩和動畫的流暢度。希望這些技巧可以幫助您更好地實現炫酷的3D效果，為網頁增添更多的樂趣。