<!-- BEST VIEWED IN FIREFOX -->
<div class="stage">
  <div class="pyramid3d">
    <div class="triangle side1"></div>
    <div class="triangle side2"></div>
    <div class="triangle side3"></div>
    <div class="triangle side4"></div>
  </div>
</div>

body {
  overflow:hidden;
  background: rgb(20,20,20);
}
.stage {
  position:relative;
  top: 500px;
  width: 150px;
  height: 320px;
  margin:auto;
  
  -webkit-perspective:1200px;
  -webkit-perspective-origin:50% 50%;
  perspective:1200px;
  perspective-origin:50% 50%;
}
.pyramid3d {
  position:relative;
  width:200px;
  height:200px;
  margin:0 auto;
  
  -webkit-transition: -webkit-transform 1s ease-out;
  transition: transform 1s ease-out;  
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;  
  -webkit-transform: rotateX(75deg) rotate(65deg);
  transform: rotateX(75deg) rotate(65deg);  
  -webkit-animation: fall 3s linear infinite;
  animation: fall 3s linear infinite;
}
.triangle {
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;  
  -webkit-transform-origin: left top;
  transform-origin: left top;  
  width:0; height:0;
  background:none;
}
.triangle:before{
  content:"";
  position: absolute;
  height: 0; width: 0;
  border-style: solid;
  border-width: 176px 75px 0 75px;  
  -webkit-transform-origin:bottom center;
  transform-origin:bottom center;
}
.side1 {
  -webkit-transform: translatex(0) rotatey(115.2deg) rotatez(90deg);
  transform: translatex(0) rotatey(115.2deg) rotatez(90deg);
}
.side2 {
  -webkit-transform: translatex(150px) rotatez(90deg) rotatex(64.8deg);
  transform: translatex(150px) rotatez(90deg) rotatex(64.8deg);
}
.side3 { 
  -webkit-transform: translatez(0) rotatex(64.8deg);
  transform: translatez(0) rotatex(64.8deg);
}
.side4 {
  -webkit-transform: translatey(150px) rotatex(115.2deg);
  transform: translatey(150px) rotatex(115.2deg);
}
.side1:before{ 
  border-color: rgba(115, 115, 0, 0.3) transparent transparent transparent; 
  -webkit-animation:flipFirst 3s infinite; 
  animation:flipFirst 3s infinite; 
}
.side2:before{ 
  border-color: rgba(20, 90, 225, 0.3) transparent transparent transparent; 
  -webkit-animation:flipSecond 3s infinite; 
  animation:flipSecond 3s infinite; 
}
.side3:before{ 
  border-color: rgba(255, 0, 0, 0.3) transparent transparent transparent; 
  -webkit-animation:flipThird 3s infinite; 
  animation:flipThird 3s infinite; 
}
.side4:before{ 
  border-color: rgba(0, 255, 255, 0.3) transparent transparent transparent;
  -webkit-animation:flipFourth 3s infinite; 
  animation:flipFourth 3s infinite; 
}
@keyframes fall {
  0%   { -webkit-transform: rotateX(75deg) rotate(65deg) translateZ( 176px); transform: rotateX(75deg) rotate(65deg) translateZ( 176px); }
  100% { -webkit-transform: rotateX(75deg) rotate(65deg) translateZ(-140px); transform: rotateX(75deg) rotate(65deg) translateZ(-140px);}
}
@keyframes flipFirst {
  12.5%,50% {
    -webkit-transform-origin:bottom center;
    transform-origin:bottom center;    
    -webkit-transform: rotatex(130deg);
    transform: rotatex(130deg);
  }
  50.0001%,87.5% {
    -webkit-transform-origin:top center;
    transform-origin:top center;
    transform:translateX(0px) translateY(286px) translateZ(-134px) rotatex(130deg);
  }  
  100% { 
    -webkit-transform-origin:top center;
    transform-origin:top center;
    transform:translateX(0px) translateY(286px) translateZ(-135px) rotatex(360deg);
  }
}
@keyframes flipSecond {
  25% {
    -webkit-transform: rotatex(0deg);
    transform: rotatex(0deg); 
  }
  37.5%,50% {     
    -webkit-transform-origin:bottom center;
    transform-origin:bottom center;    
    -webkit-transform: rotatex(-130deg);
    transform: rotatex(-130deg);
  }
  50.0001%,62.5% {
    -webkit-transform-origin:top center;
    transform-origin:top center;
    transform:translateX(0px) translateY(286px) translateZ(134px) rotatex(-130deg);
  }  
  75%,100% { 
    -webkit-transform-origin:top center;
    transform-origin:top center;
    transform:translateX(0px) translateY(286px) translateZ(134px) rotatex(-360deg);
  }
}
@keyframes flipThird {
  12.5% {
    -webkit-transform: rotatex(0deg);
    transform: rotatex(0deg); 
  }
  25%,50% {    
    -webkit-transform-origin:bottom center;
    transform-origin:bottom center;    
    -webkit-transform: rotatex(-130deg);
    transform: rotatex(-130deg);
  }
  50.0001%,75% {
    -webkit-transform-origin:top center;
    transform-origin:top center;
    transform:translateX(0px) translateY(286px) translateZ(134px) rotatex(-130deg);
  }
  87.5%,100% { 
    -webkit-transform-origin:top center;
    transform-origin:top center;
    transform:translateX(0px) translateY(286px) translateZ(134px) rotatex(-360deg);
  }
}
@keyframes flipFourth {
  37.5% {
    -webkit-transform: rotatex(0deg);
    transform: rotatex(0deg);
  } 
  50% {    
    -webkit-transform-origin:bottom center;
    transform-origin:bottom center;    
    -webkit-transform: rotatex(130deg);
    transform: rotatex(130deg);
  }
  50.0001% {
    -webkit-transform-origin:top center;
    transform-origin:top center;
    transform:translateX(0px) translateY(286px) translateZ(-134px) rotatex(130deg);
  }
  62.5%,100% { 
    -webkit-transform-origin:top center;
    transform-origin:top center;
    transform:translateX(0px) translateY(286px) translateZ(-134px) rotatex(360deg);
  }
}

// For more check out zachsaucier.com