3D菜單效果在網頁設計中越來越流行。使用CSS可以實現這種效果。在這篇文章中我們將會介紹如何使用CSS創建一個3D菜單。

.menu {
perspective: 1000px;
}
.menu-item {
transform-style: preserve-3d;
transform: translateZ(0);
transition: transform 0.3s;
}
.menu-item:hover {
transform: rotateY(30deg);
}
.menu-item:hover .menu-text {
transform: rotateY(-30deg);
color: white;
}
.menu-item:hover .menu-bg {
opacity: 0.5;
}
.menu-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
transition: transform 0.3s, color 0.3s;
}
.menu-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0;
transition: opacity 0.3s;
}

首先，我們需要為菜單容器設置perspective屬性。這個屬性定義了3D空間的視距，決定了3D變換的程度。接著，我們需要為每一個菜單項添加transform-style和transform屬性。這些屬性為元素的子元素提供了3D變換的上下文環境。當鼠標懸停時，我們通過調整transform屬性的值來實現3D旋轉效果。同時，我們還需要為菜單項的文字和背景添加transition屬性，來產生過渡動畫效果。