CSS 2D转换 动画 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"的关键帧动画，它将一个名为"box"的元素从左侧移动到右侧。

2. 3D转换动画：

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

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

3. 2D转换与3D转换结合动画：

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

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

以上代码仅展示了2D转换、3D转换和动画的简单应用，CSS还有许多其他的特性和用法，可以创建出更加复杂和引人入胜的动画效果。