body{
  padding-top:230px;
}
.tetra{
  position:relative;
  transform-origin: 50% 56%;
  width:700px;
  padding-bottom:606.21px; /* height of equilateral triangle = sin60° * width */
  margin:0 auto;  
  transform-style:preserve-3d;  
  transition: transform 1s;
  animation-name: rotate;
  animation-duration:30s;
  animation-iteration-count: infinite;
 
}
.tetra div{
  display: block;
  position: absolute;
  top:0;left:0;
  width:100%; height:100%;
  background:transparent;  
  transform-style:preserve-3d;
  -webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  clip-path:polygon(50% 0, 100% 100%, 0% 100%);
}
/* Rotation of –109.5° is angle(C, M[AB], D), per http://www.f-lohmueller.de/pov_tut/geo/geom_200e.htm, 180° – atan(2 * sqrt(2)) ≈ 109.5° */
.tetra .face2{
  transform-origin:0% 100%;
  transform:rotate(-60deg) rotatex(-109.5deg);
  background: rgba(163, 163, 163, 0.4);

}
.tetra .face3{
  transform-origin:100% 100%;
  transform:rotate(60deg) rotatex(-109.5deg);
  background: rgba(163, 163, 163, 0.4);

}
.tetra .face4 {
  transform-origin:50% 100%;
  transform:rotate(180deg) rotatex(-109.5deg);
  background: rgba(163, 163, 163, 0.4);
 
}
.tetra .face4 p {
  transform: scale(-1, 1);
  top: 60%;
  left: 53%;
  width: 93px;
  margin: 0px;
  position: relative;
  z-index: -1;
  font-size:25px;
  font-weight: bold;
  pointer-events: all;
 
}
.tetra .face2 p {
  transform: scale(-1, 1);
  font-size:30px;
  top: 60%;
  left: 58%;
  position: relative;
  width: 93px;
  margin: 0px;
  font-weight: bold;
  pointer-events: all;

}
.tetra .face3 p {
  transform: scale(-1, 1);
  font-size:30px;
  top: 54%;
  left: 28%;
  position: relative;
  width: 300px;
  font-weight: bold;
  pointer-events: all;
  
}
@keyframes rotate{
  0%{transform:rotatex(90.01deg) rotatez(0deg);}
  30%{transform:rotatex(90.01deg)  rotatez(120deg);}
  60%{transform:rotatex(90.01deg) rotatez(240deg);}
  100%{transform:rotatex(90.01deg) rotatez(360deg);}
}