HTML 3D動(dòng)畫可以讓網(wǎng)頁更加生動(dòng)和有趣。下面是一個(gè)簡單的HTML 3D動(dòng)畫代碼示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 定義3D動(dòng)畫容器 */
#animation-container {
width: 200px;
height: 200px;
perspective: 500px; /* 透視距離 */
position: relative;
}
/* 定義一個(gè)立方體 */
.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d; /* 保持3D效果 */
animation: rotate-cube 5s linear infinite; /* 設(shè)置旋轉(zhuǎn)動(dòng)畫 */
}
/* 定義初始狀態(tài) */
.side {
position: absolute;
width: 200px;
height: 200px;
background-color: orange;
opacity: 0.7;
border: 2px solid white;
}
/* 定義立方體的六個(gè)面 */
.front { transform: translateZ(100px); }
.back { transform: 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); }
/* 定義旋轉(zhuǎn)動(dòng)畫 */
@keyframes rotate-cube {
from { transform: rotateX(0) rotateY(0) rotateZ(0); }
to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}
</style>
</head>
<body>
<div id="animation-container">
<div class="cube">
<div class="side front"></div>
<div class="side back"></div>
<div class="side right"></div>
<div class="side left"></div>
<div class="side top"></div>
<div class="side bottom"></div>
</div>
</div>
</body>
</html>上述代碼中，首先定義了一個(gè)3D動(dòng)畫容器，其寬度和高度分別為200px，并設(shè)置了透視距離和相對(duì)定位。接著定義了一個(gè)立方體，設(shè)置了保持3D效果和旋轉(zhuǎn)動(dòng)畫。然后定義了立方體的六個(gè)面以及初始狀態(tài)，最后在HTML中使用了div標(biāo)簽，將上述內(nèi)容輸出至網(wǎng)頁中。
使用HTML 3D動(dòng)畫代碼可以為網(wǎng)頁增加更多趣味性和視覺效果，可以適用于各式各樣的網(wǎng)頁設(shè)計(jì)。