CSS 3D 旋转：为网页添加立体效果

CSS 3D 旋转是 CSS3 中的一个新特性，它可以实现在三维空间中对 HTML 元素进行旋转、缩放和移动等操作，让网页更加生动、立体和有趣。

CSS 3D 旋转使用的是 transform 属性，其中包括了 rotateX(), rotateY(), rotateZ(), scaleX(), scaleY(), scaleZ(), translateX(), translateY() 和 translateZ() 等函数，可以分别控制元素在 X 轴、Y 轴、Z 轴上的旋转、缩放和移动。

下面是一个例子，实现了一个盒子在 X 轴和 Y 轴上的旋转：

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transform: rotateX(45deg) rotateY(45deg);
}

在这个例子中，通过 rotateX() 和 rotateY() 函数实现了盒子在 X 轴和 Y 轴上的旋转。可以尝试修改这些函数的参数，观察效果的变化。

除了旋转，CSS 3D 还支持其他的 3D 效果，例如 3D 翻转、3D 翻页、3D 立方体等。掌握了这些技巧，可以让网页设计更加生动有趣。