下面是一个使用JavaScript制作动态旋转立方体效果的示例代码:

html

#container {
position: relative;
width: 200px;
height: 200px;
perspective: 600px;
}

#cube {
position: absolute;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: translateZ(-100px);
animation: rotate 5s infinite linear;
}

.face {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
border: 1px solid black;
}

.front {
transform: translateZ(100px);
background-color: red;
}

.back {
transform: rotateY(180deg) translateZ(100px);
background-color: blue;
}

.left {
transform: rotateY(-90deg) translateZ(100px);
background-color: green;
}

.right {
transform: rotateY(90deg) translateZ(100px);
background-color: yellow;
}

.top {
transform: rotateX(90deg) translateZ(100px);
background-color: orange;
}

.bottom {
transform: rotateX(-90deg) translateZ(100px);
background-color: purple;
}

@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

var cube = document.getElementById("cube");
var isRotating = true;

cube.addEventListener("mouseover", function() {
isRotating = false;
});

cube.addEventListener("mouseout", function() {
isRotating = true;
});

function rotateCube() {
if (isRotating) {
cube.style.transform = "rotateX(" + Date.now() / 20 + "deg) rotateY(" + Date.now() / 30 + "deg) rotateZ(" + Date.now() / 40 + "deg)";
}
requestAnimationFrame(rotateCube);
}

rotateCube();

此代码使用CSS 3D转换属性和JavaScript中的`requestAnimationFrame`方法实现了一个旋转的立方体。立方体的每个面都使用一个带有不同背景颜色的`div`元素进行表示,并应用了CSS 3D转换属性来实现立方体的旋转效果。JavaScript部分负责控制立方体是否旋转,并在每一帧更新立方体的旋转角度。

你可以将此代码复制到一个HTML文件中,并使用浏览器打开,以查看效果。当鼠标悬停在立方体上时,立方体将停止旋转,当鼠标移出时,立方体将继续旋转。