<div id="prism"></div>
<div id="input">
  <p><span>5</span> faces
    <br>
    <input type="range" value="6" min="3" max="20" step="1" id="rotateXInput" autocomplete="off">
  </p>
</div>

* {
  padding: 0;
  margin: 0;
}

body {
  height: 100%;
  font-size: 16px;
  background-color: #000;
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
}

p {
  padding: .5em;
  line-height: 1.5em;
}

#input {
  padding: 1em;
}

.triangle {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-perspective: 600px;
  perspective: 600px;
  -webkit-transform-origin: center top;
  transform-origin: center top
}

#prism {
  height: 300px;
  width: 300px;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(9deg) rotateX(40deg);
  transform: rotateY(9deg) rotateX(40deg);
  -webkit-animation: rotate 20s linear infinite;
  animation: rotate 20s linear infinite;
}

@-webkit-keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg)
  }
  100% {
    transform: rotateY(360deg) rotateX(360deg) rotateZ(720deg)
  }
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg)
  }
  100% {
    transform: rotateY(360deg) rotateX(360deg) rotateZ(720deg)
  }
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
  background-color: #777;
  width: 20px;
  height: 20px;
  border: 3px solid #000;
  border-radius: 50%;
  margin-top: -9px;
}

input[type=range]::-moz-range-thumb {
  background-color: #777;
  width: 15px;
  height: 15px;
  border: 3px solid #000;
  border-radius: 50%;
}

input[type=range]::-ms-thumb {
  background-color: #777;
  width: 20px;
  height: 20px;
  border: 3px solid #000;
  border-radius: 50%;
}

input[type=range]::-webkit-slider-runnable-track {
  background-color: #777;
  height: 3px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  outline: none;
}

input[type=range]::-moz-range-track {
  background-color: #777;
  height: 3px;
}

input[type=range]::-ms-track {
  background-color: #777;
  height: 3px;
}

input[type=range]::-ms-fill-lower {
  background-color: HotPink
}

input[type=range]::-ms-fill-upper {
  background-color: black;
}

var s = document.createElement('style');
document.head.appendChild(s);
var input = document.querySelector("#input p input");
var output = document.querySelector("#input p span");

var prism = document.getElementById("prism");
var cx = window.innerWidth / 2;
var cy = window.innerHeight / 2;
var r = 120;
var deg = 180 / Math.PI;
var rad = Math.PI / 180;
var n = 5;
var side, h;

var fill = "hsla(45,100%,50%,.5)";

function classTriangle(w, h) {
  s.textContent = '';

  var css = '.triangle{width:' + w + 'px; height:' + h + 'px;}';

  css += "\n.triangle:before{content:''; display:inline-block; height:0px; width:0px;"
  css += "\nborder-bottom:" + h + "px solid " + fill + ";";
  css += "\nborder-left:" + w / 2 + "px solid transparent;";
  css += "\nborder-right:" + w / 2 + "px solid transparent;}";

  s.textContent += css;
}

function drawPyramid(n) {

  s.textContent += '.triangle{ width:' + side + 'px; height:' + h + 'px;}';

  var angleRotateY = 180 - ((n - 2) * 180 / n);
  var angleRotateX = Math.asin(r / h) * deg;
  var distTranslateZ = 0 //8+r/2;
  prism.innerHTML = '';
  for (var i = 1; i <= n; i++) {
    var triangle = document.createElement('div');
    triangle.setAttribute("class", "triangle");
    prism.appendChild(triangle);
    s.textContent += "\n" + '.triangle:nth-child( ' + i + ' ){-webkit-transform:rotateY(' + (angleRotateY * i) + 'deg) rotateX(' + angleRotateX + 'deg) translateZ(' + (distTranslateZ) + 'px);transform:rotateY(' + (angleRotateY * i) + 'deg) rotateX(' + angleRotateX + 'deg) translateZ(' + (distTranslateZ) + 'px); -webkit-filter:hue-rotate(' + (angleRotateY * i) + 'deg);filter:hue-rotate(' + (angleRotateY * i) + 'deg);}';
  }
}

function Draw(n) {
  side = (2 * r * Math.tan(Math.PI / n));
  h = 3 * r;
  classTriangle(side, h)
  drawPyramid(n);
}

window.addEventListener('load', function() {
  n = input.value;
  output.innerHTML = n;
  Draw(n);
}, false);
input.addEventListener('change', function() {
  n = this.value;
  output.innerHTML = n;
  Draw(n);
}, false);