docs/css3d_animation

CSS3D动画是一种在网页上创建3D效果的技术，它允许开发者通过CSS实现复杂的3D动画效果。以下是一些CSS3D动画的基本概念和示例。

基本概念

transform3d: 用于创建3D变换。
perspective: 设置观察者的视角。
rotateX/Y/Z: 分别绕X轴、Y轴和Z轴旋转元素。
translateX/Y/Z: 分别沿X轴、Y轴和Z轴平移元素。

示例

假设我们有一个简单的立方体，我们可以通过以下CSS代码来给它添加一个旋转动画：

#cube {
  width: 100px;
  height: 100px;
  background-color: red;
  transform-style: preserve-3d;
  animation: rotateCube 5s infinite linear;
}

@keyframes rotateCube {
  from {
    transform: rotateY(0deg) rotateX(0deg);
  }
  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

在这个例子中，我们创建了一个名为rotateCube的关键帧动画，它会使立方体绕Y轴和X轴旋转360度。

3D空间中的元素定位

在3D空间中，元素的位置可以通过translateX/Y/Z和rotateX/Y/Z属性来控制。以下是一个示例：

#cube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(45deg);
}

在这个例子中，我们通过translate属性将立方体定位到视图中，并通过rotateY属性使它绕Y轴旋转45度。

扩展阅读

想要了解更多关于CSS3D动画的知识，可以阅读本站的《深入CSS3D动画》。