3D月餅是一種特別有趣的體驗，可以讓您在網上創造自己的虛擬月餅。在本文中，我們將學習如何使用 HTML 代碼創建一個簡單的 3D 月餅。
<!DOCTYPE html>
<html>
<head>
<title>3D 月餅</title>
<style>
#mooncake {
width: 500px;
height: 500px;
perspective: 1000px;
margin: 50px auto;
}
#mooncake .wrapper {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotate 3s linear infinite;
}
#mooncake .wrapper div {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: #bf802f;
}
#mooncake .wrapper div:after {
content: "";
display: block;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
border-radius: 50%;
background: #f6d16b;
}
#mooncake .wrapper div:nth-child(1) {
transform: translateZ(200px);
}
#mooncake .wrapper div:nth-child(2) {
transform: rotateY(60deg) translateZ(200px);
}
#mooncake .wrapper div:nth-child(3) {
transform: rotateY(120deg) translateZ(200px);
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="mooncake">
<div class="wrapper">
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>代碼中的關鍵 CSS 屬性是 perspective、transform-style、transform 和 animation。perspective 屬性用于定義整個 3D 場景的視角距離。transform-style 屬性定義了每個子元素的 3D 變換是否相對于其父元素（preserve-3d）還是相對于平面（flat）。transform 屬性結合著 translateZ 和 rotateY 屬性把每個月餅放置在出現的正面。animation 屬性制作了月餅的旋轉動畫。
現在，您可以將此代碼復制并粘貼到 HTML 文件中，然后在瀏覽器中打開以查看您的 3D 月餅。快樂創建！