当今互联网上常见的三维效果越来越多，3D旋转也是其中之一。如果你想给你的页面添加一些惊艳的特效，那么JavaScript 3D旋转依旧是一个很好的选择，它可以帮你增添页面的动感和视觉冲击力。

使用JavaScript 3D旋转可以让一个元素在三维空间中绕其自身的轴旋转，如图所示：

.box{
transform-style: preserve-3d;
animation: rotate 2s infinite linear;
}
@keyframes rotate{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

比如，你可以创建一个如下的HTML代码：

然后在CSS中定义.box和.container的样式：

.container{
perspective: 1000px;
}
.box{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
transform-style: preserve-3d;
animation: rotate 2s infinite linear;
}
@keyframes rotate{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

这时，你会看到一个红色的正方形不停地在三维空间中旋转。

除了这个例子之外，还可以通过JavaScript 3D旋转实现更多的效果。比如，你可以创建一个立方体：

在CSS中，我们定义这个立方体的样式：

.container{
perspective: 1000px;
}
.cube{
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
transform-style: preserve-3d;
animation: rotate 2s infinite linear;
}
.face{
position: absolute;
width: 200px;
height: 200px;
}
.front{
transform: translateZ(100px);
background: red;
}
.left{
transform: rotateY(-90deg) translateZ(100px);
background: blue;
}
.right{
transform: rotateY(90deg) translateZ(100px);
background: yellow;
}
.top{
transform: rotateX(-90deg) translateZ(100px);
background: green;
}
.bottom{
transform: rotateX(90deg) translateZ(100px);
background: orange;
}
.back{
transform: rotateX(180deg) translateZ(100px);
background: grey;
}
@keyframes rotate{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

这时，你会看到一个带六个面的立方体在三维空间中旋转。

总的来说，JavaScript 3D旋转可以使我们的页面更加生动有趣，给用户创造更好的视觉体验。除了上述的例子，你可以尝试自己去制作不同的3D效果，创造出更加惊艳的页面。