css 元素3D抖动

要实现 CSS 元素的 3D 抖动效果，可以使用 CSS3 的动画和 transform 属性，具体步骤如下：

1. 首先，需要将元素设置为 3D 空间，可以通过设置 perspective 属性实现：

.container {
  perspective: 1000px;
}

2. 接着，使用 CSS3 的动画和 transform 属性来实现抖动效果：

@keyframes shake {
  0% {
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
  }
  10% {
    transform: translate3d(-10px, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  20% {
    transform: translate3d(10px, 0, 0) rotate3d(0, 0, 1, 5deg);
  }
  30% {
    transform: translate3d(-10px, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  40% {
    transform: translate3d(10px, 0, 0) rotate3d(0, 0, 1, 5deg);
  }
  50% {
    transform: translate3d(-10px, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  60% {
    transform: translate3d(10px, 0, 0) rotate3d(0, 0, 1, 5deg);
  }
  70% {
    transform: translate3d(-10px, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  80% {
    transform: translate3d(10px, 0, 0) rotate3d(0, 0, 1, 5deg);
  }
  90% {
    transform: translate3d(-10px, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
  }
}

.element {
  animation: shake 0.8s;
  animation-iteration-count: infinite;
}

这段代码中，我们定义了一个名为 shake 的动画，它包含多个关键帧，每个关键帧都使用 translate3d 和 rotate3d 方法来实现元素的平移和旋转。然后，将这个动画应用到需要抖动的元素上，使用 animation-iteration-count 属性来让动画无限循环。

这样，就可以实现 CSS 元素的 3D 抖动效果了。