現今網頁設計越來越使用3D動畫效果，讓用戶對網站有更好的體驗感和互動感。在前端設計中使用CSS是一種流行的方式，下面介紹幾個CSS實現3D動畫效果的代碼。

/* 立方體翻轉動畫 */
.box {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: all .5s ease;
}
.box .side {
position: absolute;
width: 200px;
height: 200px;
text-align: center;
font-size: 30px;
} 
.box .front { transform: rotateY(0deg) translateZ(100px); }
.box .back { transform: rotateY(180deg) translateZ(100px); }
.box .right { transform: rotateY(90deg) translateZ(100px); }
.box .left { transform: rotateY(-90deg) translateZ(100px); }
.box .top { transform: rotateX(90deg) translateZ(100px); }
.box .bottom { transform: rotateX(-90deg) translateZ(100px); }
.box:hover { transform: rotateY(180deg); }

這段代碼實現的就是一個立方體翻轉動畫，當鼠標移入時會有一個翻轉的動畫效果。

/* 3D圖片輪播 */
.container {
perspective: 1000px;
}
.carousel {
position: relative;
transform-style: preserve-3d;
transform: translateZ(-400px);
transition: all .5s ease;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.carousel:hover {
transform: rotateY(360deg) translateZ(-400px);
}
.carousel img:nth-child(1) { transform: rotateY(0deg) translateZ(400px); }
.carousel img:nth-child(2) { transform: rotateY(60deg) translateZ(400px); }
.carousel img:nth-child(3) { transform: rotateY(120deg) translateZ(400px); }
.carousel img:nth-child(4) { transform: rotateY(180deg) translateZ(400px); }
.carousel img:nth-child(5) { transform: rotateY(240deg) translateZ(400px); }
.carousel img:nth-child(6) { transform: rotateY(300deg) translateZ(400px); }

這段代碼實現的是一個3D圖片輪播效果，當鼠標移入時會有一個3D旋轉的動畫效果。

/* 3D按鈕效果 */
.btn-3d {
display: inline-block;
position: relative;
padding: 10px 20px;
border: none;
background-color: #555;
color: #fff;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 2px;
transition: all .5s ease;
}
.btn-3d::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
width: 100%;
height: 100%;
transform: translateZ(-50px);
background-color: #00af87;
transition: all .5s ease;
}
.btn-3d:hover {
transform: translateY(-5px);
box-shadow: 0 5px 10px rgba(0,0,0,.3);
}
.btn-3d:hover::before {
transform: translateZ(-80px) rotateX(30deg);
}

這段代碼實現的是一個3D按鈕效果，當鼠標移入時會有一個3D的彈起效果。