使用css或js创建三维测量

Question

我想知道是否可以用css或js以某种方式创建一个3d测量。这样就会有一个高度和一个长度的宽度。我知道没有传统的方法可以做到这一点，但我确信有人提出的事情比我找到的解决方案更简单。

我想知道是否可以堆叠具有不同z索引的div，或者是否有更好的方法来执行此操作。

以下是我想要{3}}

的非3D版本的演示

.one {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 20px inset #81ff14;
  text-align: center;
  animation: spin 3s infinite linear;
}

.two {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 20px outset #81ff14;
  margin: auto;
  margin-top: 5px;
  text-align: center;
  animation: spin 5s infinite linear;
}

.survive {
  font-size: 36px;
  line-height: 35px;
  max-width: 150px;
  margin: -175px auto;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  position: relative;
  z-index: 0;
}

.preserve {
  transform-style: preserve-3d;
  z-index: 100;
  position: relative;
}

.containAnimation {
  height: 300px;
  width: 300px;
  text-align: center;
}

@keyframes spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(-180deg) rotateY(180deg);
  }
  90% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}

DEMO是我想要最终结果的例子。