%h1 CSS 3D music visualization using D3.js
%div.space3d
  - (1..15).each do |i|
    %div._3dbox
      %div._3dface._3dface--front
      %div._3dface._3dface--back
      %div._3dface._3dface--left
      %div._3dface._3dface--right
      %div._3dface._3dface--top
      %div._3dface._3dface--bottom

<br><br><br><br>
An accident by <a href="https://twitter.com/chinchang457">Kushagra Gour</a>

@import url(https://fonts.googleapis.com/css?family=Playball);

body {
  background-image: url(https://subtlepatterns.com/patterns/tweed.png);
  color: #999;
  text-shadow: 0 1px 0px #333;
  text-align: center;
  font-family: 'Playball', cursive;
  font-size: 1.4em;
  perspective: 700px;
}

a {
  color: #00ACED;
}

$l: 15;
$gap: 360/$l;
$radius: 120px;

@for $i from 1 through $l {
  ._3dbox:nth-child(#{$i}) {
    transform: rotateY(#{$i * $gap}deg) translateZ($radius);
  }
}
  

// toggle the cube dimensions here.
$cubeWidth: 35px;
$cubeHeight: 35px;
$cubeDepth: $cubeHeight;

/* 3D Cube */
.space3d {
  transform-style: preserve-3d;
	
	width: $cubeWidth;
	height: 400px;
	text-align: center;
	display: inline-block;
  position: relative;
  animation: rot 15s linear infinite;
}

._3dbox {
  position: absolute;
  bottom: 0;
  left: 0;
  
  text-align: center;
	width: $cubeWidth;
	height: $cubeHeight;
	transform-style: preserve-3d;
  opacity: 0.8;
}

._3dface {
	overflow: hidden;
	position: absolute;
  
	background: inherit;
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1),
 0 0 50px rgba(0, 0, 0, 0.3);  line-height: $cubeWidth;
}


._3dface--front {
  width: $cubeWidth;
  height: $cubeHeight;
  transform: translate3d(0, 0, $cubeDepth / 2);
}
  
._3dface--top {
  width: $cubeWidth;
  height: $cubeDepth;
  transform: rotateX(90deg) translate3d(0, 0, $cubeHeight / 2);
}

._3dface--bottom {
  width: $cubeWidth;
  height: $cubeDepth;
	transform: rotateX(-90deg) translate3d(0, 0, $cubeHeight / 2);
}

._3dface--left {
	width: $cubeDepth;
  height: $cubeHeight;
  left: 50%;
  margin-left: -$cubeDepth / 2;
  transform: rotateY(-90deg) translate3d(0, 0, $cubeWidth / 2);
}


._3dface--right {
  width: $cubeDepth;
  height: $cubeHeight;
  left: 50%;
  margin-left: -$cubeDepth / 2;
	transform: rotateY(90deg) translate3d(0, 0, $cubeWidth / 2);
}


._3dface--back {
  width: $cubeWidth;
  height: $cubeHeight;
	transform: rotateY(180deg) translate3d(0, 0, $cubeDepth / 2);
}

@keyframes rot {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }    
}

var color= ~~(Math.random()*360),
    spans = d3.selectAll("._3dbox"),
    len = 15;

spans
  .style("background-color", function(d) { 
          return "hsl("+ random(0, 360) +", 60%, 50%)";
		})
      
      function draw () {
        spans
      	.transition().duration(500).ease('elastic')
  .style("height", function(d) { return d * 5 + "px"; });
      }
      
      setInterval(function () {
        var arr = Array.apply(null, new Array(len)).map(function () {
          return random(10, 80);
        });
        spans
    	.data(arr);
        draw();
	  }, 800);
      
      function random (min, max) {
        return min + ~~(Math.random() * (max - min));
      }