HTML炫酷立方體可以是一種很酷的網頁設計元素。下面是一個簡單的HTML炫酷立方體代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML炫酷立方體</title>
<style>
.cube {
perspective: 500px; /* 透視距離 500 像素 */
transform-style: preserve-3d; /* 開啟 3D 變換 */
}
.cube div {
position: absolute; /* 開啟絕對定位 */
width: 100px;
height: 100px;
background-color: #8cc7ff;
opacity: 0.7;
text-align: center;
line-height: 100px;
font-size: 24px;
font-weight: bold;
color: #fff;
border: 3px solid #fff;
}
.cube .front {
transform: translateZ(50px); /* 將該面向前移動 50 像素 */
}
.cube .back {
transform: rotateY(180deg) translateZ(50px); /* 將該面旋轉 180 度后向后移動 50 像素 */
}
.cube .left {
transform: rotateY(-90deg) translateZ(50px); /* 將該面旋轉 -90 度后向左移動 50 像素 */
}
.cube .right {
transform: rotateY(90deg) translateZ(50px); /* 將該面旋轉 90 度后向右移動 50 像素 */
}
.cube .top {
transform: rotateX(-90deg) translateZ(50px); /* 將該面旋轉 -90 度后向上移動 50 像素 */
}
.cube .bottom {
transform: rotateX(90deg) translateZ(50px); /* 將該面旋轉 90 度后向下移動 50 像素 */
}
</style>
</head>
<body>
<div class="cube">
<div class="front">前</div>
<div class="back">后</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="bottom">下</div>
</div>
</body>
</html>在這段代碼中，我們使用了CSS的3D變換來實現立方體效果。使用透視距離和絕對定位來使立方體的各個面沿著不同的方向移動。我們控制了每個立方體面的位置和旋轉。通過這些簡單的CSS代碼，我們可以創建出一個非常漂亮的3D立方體來提高網站的視覺效果。