如何用纯CSS制作炫酷的3D按钮效果？

可以使用CSS的transform属性和伪元素实现3D按钮效果。

首先，给按钮加上样式：

button {
  padding: 10px 20px;
  font-size: 18px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  perspective: 1000px; /* 透视距离，需要设置非常大才能看到3D效果 */
}

然后，给按钮加上阴影，使其看起来浮起来：

button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: translate3d(0, 0, -1px);
}

接着，给按钮的内部元素加上放大和旋转的动画：

button span {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease;
}
button:hover span {
  transform: scale(1.5) rotateX(30deg) rotateY(-30deg);
}

最后，加上按钮按下去时的效果：

button:active:before {
  box-shadow: none;
  transform: translate3d(0, 0, 1px);
}
button:active span {
  transform: scale(1.2) rotateX(5deg) rotateY(-5deg);
}

完整的代码如下：

<button><span>按钮</span></button>

button {
  padding: 10px 20px;
  font-size: 18px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  perspective: 1000px;
}

button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: translate3d(0, 0, -1px);
}

button span {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease;
}

button:hover span {
  transform: scale(1.5) rotateX(30deg) rotateY(-30deg);
}

button:active:before {
  box-shadow: none;
  transform: translate3d(0, 0, 1px);
}

button:active span {
  transform: scale(1.2) rotateX(5deg) rotateY(-5deg);
}