CSS 2D转换 3D动画 3D转换

在CSS中，我们可以使用2D和3D转换来创建动画。以下是一些示例：

1. 2D转换动画：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s infinite;
}
 
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

在这个例子中，我们创建了一个名为"move"的关键帧动画，它将对象从左侧移动到右侧。

2. 3D转换动画：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s infinite;
}
 
@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

在这个例子中，我们创建了一个名为"rotate"的关键帧动画，它将对象绕Y轴旋转。

3. 3D转换和动画组合：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: moveAndRotate 2s infinite;
}
 
@keyframes moveAndRotate {
  0% {
    transform: translateX(0) rotateY(0);
  }
  100% {
    transform: translateX(100px) rotateY(360deg);
  }
}

在这个例子中，我们创建了一个名为"moveAndRotate"的关键帧动画，它将对象从左侧移动到右侧并绕Y轴旋转。

以上代码都可以直接应用于HTML元素，例如：

<div class="box"></div>

这些示例展示了如何使用CSS的2D和3D转换以及动画来创造复杂的视觉效果。