css3d动画乒乓球

CSS3D动画是指利用CSS3中的3D变换，创建出精彩的3D动画效果。其中一个经典的案例就是乒乓球。

.ball {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: pingpong 3s ease-in-out infinite;
}

@keyframes pingpong {
  0% {
    transform: translateZ(-800px) rotateX(90deg);
  }
  25% {
    transform: translateZ(-200px) rotateX(45deg) rotateY(90deg);
  }
  50% {
    transform: translateZ(-800px) rotateX(0deg) rotateY(180deg);
  }
  75% {
    transform: translateZ(-200px) rotateX(-45deg) rotateY(270deg);
  }
  100% {
    transform: translateZ(-800px) rotateX(-90deg) rotateY(360deg);
  }
}

.table {
  position: relative;
  width: 600px;
  height: 400px;
  perspective: 800px;
  perspective-origin: 50% 50%;
}

.net {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #000;
}

代码中的.ball类定义了乒乓球的样式，设置为白色圆形，并加上3D效果。通过关键帧动画pingpong，控制乒乓球的运动路径。注意translateZ是改变物体在z轴方向上的平移距离，perspective定义了整个3D场景的观察角度。

而.table类定义了球台的样式，并设置了透视，让视角更真实。最后的.net类定义了乒乓球桌中间的网格线。

通过以上代码，我们可以轻松制作一个3D动画的乒乓球场景。