How to center the rotation of a 3d css object - css

Question

I'm trying to get my head around transforms and 3d animation perspectives for css. I have created a piece of code that displays an 8 sided die and then rotates it for the viewer.
However, the die seems to rotate around an invisible center object,
rather than the center of the die being the center point for the rotation animation.
I realize that I must not be grasping something about the code I have written through trial and error.
Here is a fiddle to show what I mean about the way the shape seems to rotate around an invisible center: https://jsfiddle.net/4qbLct3b/
Instead, I want the center of the 3 dimensional object to be the center point of the rotation animation.
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>