View source for Rotating CSS Tetrahemihexahedron

{{#css:
.thh-scene {
height: 200px;
margin: 100px;
perspective: 600px;
width: 200px;
}

.thh-scene .tetrahemihexahedron {
animation: rotatey 15s linear infinite;
height: 100%;
position: relative;
transform-style: preserve-3d;
width: 100%;
}
.thh-scene .triangle, .thh-scene .square {
height: 200px;
position: absolute;
width: 200px;
}
.thh-scene .face1 {
transform: rotateY(0deg) translateZ(61px) translateY(-54.5px) rotateX(35.2643897deg);
}
.thh-scene .face2 {
transform: rotateY(180deg) translateZ(61px) translateY(-54.5px) rotateX(35.2643897deg);
}
.thh-scene .face3 {
transform: rotateY(90deg) translateZ(61px) translateY(54.5px) rotateX(144.7356103deg);
}
.thh-scene .face4 {
transform: rotateY(270deg) translateZ(61px) translateY(54.5px) rotateX(144.7356103deg);
}
.thh-scene .face5 {
background-color: rgba(0, 0, 255, 0.5);
transform: rotateX(90deg);
}
.thh-scene .face6 {
background-color: rgba(0, 255, 255, 0.5);
transform: rotateX(90deg) rotate3d(1, 1, 0, 90deg);
}
.thh-scene .face7 {
background-color: rgba(0, 0, 0, 0.5);
transform: rotateX(90deg) rotate3d(1, -1, 0, 90deg);
}

.thh-scene .face1 .tri-inner {
border-bottom-color: rgba(255, 0, 0, 0.5);
}
.thh-scene .face2 .tri-inner {
border-bottom-color: rgba(0, 255, 0, 0.5);
}
.thh-scene .face3 .tri-inner {
border-bottom-color: rgba(255, 0, 255, 0.5);
}
.thh-scene .face4 .tri-inner {
border-bottom-color: rgba(255, 255, 0, 0.5);
}

.thh-scene .tri-inner-container {
height: 200px;
width: 200px;
}
.thh-scene .tri-inner {
border-bottom: 173.2050807569px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
height: 0;
left: calc((200px - 200px) / 2);
position: absolute;
top: calc(((200px - 173.2050807569px) / 2) - 19.25px);
width: 0;
}
@keyframes rotatey {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(1turn) rotateY(2turn) rotateZ(3turn);
}
}
}}
<div class="thh-scene">
<div class="tetrahemihexahedron">
<div class="triangle face1"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
<div class="triangle face2"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
<div class="triangle face3"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
<div class="triangle face4"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
<div class="square face5"></div>
<div class="square face6"></div>
<div class="square face7"></div>
</div>
</div>
[[Category:Pages containing a rotating css tetrahemihexahedron]]<noinclude>[[Category:Rotating css polytopes]][[Category:Shapes]]</noinclude>