制作3D变形方块

要制作一个3D变形方块，可以使用 CSS3 的 `transform` 属性。

首先，创建一个正方形的 `div` 元素，并设置好它的宽度、高度、背景颜色等样式。

然后，使用 `transform-style: preserve-3d;` 属性将该元素的子元素变成3D空间中的元素，并设置 `transform-origin` 属性来确定变形的中心点。

接着，使用 `transform` 属性来实现变形效果。例如，可以使用 `rotateX()` 和 `rotateY()` 方法来分别绕 X 轴和 Y 轴旋转元素，使用 `translateZ()` 方法来改变元素的 Z 轴位置，从而实现3D变形效果。

最后，使用 `animation` 属性来添加动画效果，使变形更加流畅。

以下是一个示例代码，实现一个3D变形方块的效果：

<div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
  <div class="side left"></div>
  <div class="side right"></div>
</div>

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 3s infinite linear;
}

.side {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  opacity: 0.8;
  border: 1px solid #fff;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.top {
  transform: rotateX(90deg) translateZ(-100px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(-90deg) translateZ(-100px);
  transform-origin: bottom center;
}

.left {
  transform: rotateY(-90deg) translateZ(-100px);
  transform-origin: left center;
}

.right {
  transform: rotateY(90deg) translateZ(-100px);
  transform-origin: right center;
}

@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

这段代码会实现一个3D立方体的效果，六个面分别是正面、背面、上面、下面、左面和右面。`transform` 属性和 `transform-origin` 属性可以根据实际需求进行调整，从而实现不同的3D变形效果。