在Html中，想要實現3D正方體旋轉效果，必須用到CSS 3D轉換屬性。在下面的代碼中，首先我們需要定義一個div容器，然后在其中添加一個正方體的各個面。為了能夠讓正方體旋轉起來，我們需要通過CSS的transform屬性來實現3D轉換。

<div class="cube-container">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<style>
.cube-container {
perspective: 1000px;
}
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate-cube 3s linear infinite;
}
.front, .back, .top, .bottom, .left, .right {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.5;
color: white;
}
.front {
background-color: #f00;
transform: translateZ(100px);
}
.back {
background-color: #00f;
transform: translateZ(-100px) rotateY(180deg);
}
.top {
background-color: #0f0;
transform: rotateX(-90deg) translateZ(100px) translateY(-100px);
}
.bottom {
background-color: #ff0;
transform: rotateX(90deg) translateZ(100px) translateY(100px);
}
.left {
background-color: #f0f;
transform: rotateY(-90deg) translateZ(100px) translateX(-100px);
}
.right {
background-color: #0ff;
transform: rotateY(90deg) translateZ(100px) translateX(100px);
}
@keyframes rotate-cube {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
</style>

在上述代碼中，我們使用了perspective屬性來定義3D場景的視角深度。transform-style屬性的取值為preserve-3d，表示物體中的每個面在3D空間中保持自己的位置和相對朝向。 對于每個面，我們使用了translateZ、rotateX、rotateY和translateX屬性對其進行3D轉換。transform-origin屬性可以設置物體的變換基點。通過定義一個3D場景和添加合適的3D轉換，我們就可以實現一個旋轉的3D正方體。