如何使3d css对象的旋转居中

Question

我正试图让我的头围绕css的变换和3D动画视角。我创建了一段显示8面模具的代码，然后为观察者旋转它。

但是，模具似乎围绕一个看不见的中心物体旋转， 而不是骰子的中心是旋转动画的中心点。

我意识到我一定不会理解我通过反复试验编写的代码。

这是一个小提示，表明我的意思是形状似乎围绕一个看不见的中心旋转的方式：https://jsfiddle.net/4qbLct3b/

相反，我希望3维对象的中心成为旋转动画的中心点。

HTML

body {
  perspective: 9000px;
  padding-top: 10%;
}

.d8 {
  height: 64px;
  width: 64px;
  margin: auto;
}

.tetra {
  position: relative;
  height: 86.6%;
  width: 100%;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotatex(0deg) rotateY(0deg) rotatez(0deg);
  animation: rotate 10s linear infinite;
}

.tetra div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(50% -2.5%, 102.5% 102.5%, -2.5% 102.5%);
  clip-path: polygon(50% -2.5%, 102.5% 102.5%, -2.5% 102.5%);
  -webkit-clip-path: border-box;
  clip-path: border-box;
  background: teal;
  transform-origin: 0% 100%;
  transform: rotatex(35deg);
  transform-style: preserve-3d;
}

.tetra .face2 {
  transform-origin: 0% 100%;
  transform: rotatey(90deg) rotatex(-35deg);
  background: gold;
}

.tetra .face3 {
  transform-origin: 0% 100%;
  left: 100%;
  transform: rotatey(90deg) rotatex(35deg);
  background: red;
}

.tetra .face4 {
  transform-origin: 0% 100%;
  transform: rotateY(-90deg) translateX(-100%) rotateY(90deg) rotatex(-35deg);
  background: black;
}

.tetra .face5 {
  transform-origin: 0% 100%;
  transform: rotateY(-90deg) translateX(-100%) rotateY(90deg) rotatex(-145deg);
  background: orange;
}

.tetra .face6 {
  transform-origin: 0% 100%;
  left: 100%;
  transform: rotatey(90deg) rotatex(145deg);
  background: green;
}

.tetra .face7 {
  transform-origin: 0% 100%;
  transform: rotatey(90deg) rotatex(-145deg);
  background: brown;
}

.tetra .face8 {
  background: grey;
  transform-origin: 0% 100%;
  transform: rotatex(145deg);
}

@keyframes rotate {
  50% {
    transform: rotatex(180deg) rotateY(180deg) rotatez(180deg);
  }
  100% {
    transform: rotatex(360deg) rotateY(360deg) rotatez(360deg);
  }
}

<div class="d8">
  <div class="tetra">
    <div class="face1"></div>
    <div class="face2"></div>
    <div class="face3"></div>
    <div class="face4"></div>
    <div class="face5"></div>
    <div class="face6"></div>
    <div class="face7"></div>
    <div class="face8"></div>
  </div>
</div>