CSS 3D技術可以輕松實現網頁內容的立體展示，進一步增強用戶體驗。下面就來介紹幾個常用的3D界面效果。

/* 立方體旋轉 */
.container{
position: relative;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
@keyframes rotate{
from{ transform: rotateX(0) rotateY(0); }
to{ transform: rotateX(360deg) rotateY(360deg); }
}
.cube{
position: absolute;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
.cube-front{
transform: translateZ(100px);
}
.cube-back{
transform: rotateY(180deg) translateZ(100px);
}
.cube-right{
transform: rotateY(90deg) translateZ(100px);
}
.cube-left{
transform: rotateY(-90deg) translateZ(100px);
}
.cube-top{
transform: rotateX(90deg) translateZ(100px);
}
.cube-bottom{
transform: rotateX(-90deg) translateZ(100px);
}
/* 環繞式展示 */
.sphere{
position: relative;
border-radius: 50%;
width: 300px;
height: 300px;
}
.sphere div{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
transform-style: preserve-3d;
}
#front{
top: 0;
left: 100px;
transform: translateZ(150px);
}
#back{
top: 200px;
left: 100px;
transform: rotateX(180deg) translateZ(150px);
}
#right{
top: 100px;
left: 200px;
transform: rotateY(90deg) translateZ(150px);
}
#left{
top: 100px;
left: 0;
transform: rotateY(-90deg) translateZ(150px);
}
#top{
top: -100px;
left: 100px;
transform: rotateX(-90deg) translateZ(150px);
}
#bottom{
top: 300px;
left: 100px;
transform: rotateX(90deg) translateZ(150px);
}
/* 3D翻轉 */
.flip{
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
perspective: 1000px;
}
.flip-card{
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out;
transform-style: preserve-3d;
}
.flip-card-front{
transform: rotateY(0deg);
}
.flip-card-back{
transform: rotateY(180deg);
}
.flip:hover .flip-card{
transform: rotateY(180deg);
}

以上代碼分別實現了一個立方體旋轉、一個球體環繞以及一個3D翻轉效果?？梢愿鶕约旱男枨筮M行代碼的修改，實現更多炫酷的界面。