在CSS中，我们可以使用3D旋转动画来给网页添加生动的效果。通过改变X、Y、Z轴上的旋转角度，我们可以让元素在三个维度上滚动、翻转和旋转。下面是一个例子：

.box {
  width: 200px;
  height: 200px;
  background-color: #333;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.box:hover {
  transform: rotateX(180deg);
}

在这个例子中，我们创建了一个200x200像素的元素，并给它添加了一个深灰色的背景色。通过设置“transform-style: preserve-3d”，我们告诉浏览器元素和其子元素的3D变换应该保持层次结构。然后，我们使用CSS3的“transition”属性指定了动画的时间为1秒。

接下来，在:hover伪类中，我们给元素添加了一个“rotateX(180deg)”变换，这意味着元素在X轴上旋转180度（即翻转）。

除了rotateX()函数，我们还可以使用其他3D变换函数。例如：

.box {
  /* ... */
}

.box:hover {
  transform: rotateY(180deg); /* 在Y轴上旋转 */
  transform: rotateZ(180deg); /* 在Z轴上旋转 */
  transform: rotate3d(1, 2, 3, 180deg); /* 在自定义轴上旋转 */
  transform: translate3d(100px, -50px, 0); /* 移动（平移）元素 */
  transform: scale3d(2, 2, 2); /* 缩放元素 */
}

可以看到，我们可以沿任意轴旋转元素，并且可以在三个维度上对其进行平移和缩放。

总的来说，CSS的3D旋转动画让我们可以在网页上实现多样化的动画效果，增加了网页的互动性和视觉吸引力。