JSFiddle - React, Tailwind, and code Playground

by mstalfoort

HTML

<section id="boom">
    <div></div>
  </section>

CSS

#boom {
    background: #fff;
    padding: 2em;
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
  }
  #boom div {
    position: relative;
    width: 400px;
    height: 400px;
    -moz-transform: translateY(-100px) rotateY(90deg);
    -moz-transform-style: preserve-3d;
    -webkit-transform: rotateY(90deg);
    -webkit-transform-style: preserve-3d;
  }
  #boom span{
    height: 15px;
    width: 15px;
    position: absolute;
    display: block;
    background: red;
    border-radius:15px;
  }  
  #boom div{
    -moz-animation: moo 5s infinite linear;
    -webkit-animation: moo 5s infinite linear;
  }
  @-moz-keyframes moo {
    0% { -moz-transform: scale(0.2,0.2) rotateY(0); }
    50% { 
      -moz-transform: scale(0.8,0.8) rotateY(360deg);
    }
    100% { 
      -moz-transform: scale(0.2,0.2) rotateY(720deg);
    }
  }
  @-webkit-keyframes moo {
    0% { -webkit-transform: scale(0.2,0.2) rotateY(0); }
    50% { 
      -webkit-transform: scale(0.4,0.4) rotateY(360deg);
    }
    100% { 
      -webkit-transform: scale(0.2,0.2) rotateY(720deg);
    }
  }

JavaScript

var c = document.querySelector('#boom div');
for(var i=0;i<100;i++){
  var p = document.createElement('span');
  var x = ~~(Math.random()*50);
  var y = ~~(Math.random()*50);
  var z = ~~(Math.random()*200);
  var rx = ~~(Math.random()*360);
  var ry = ~~(Math.random()*360);
  var rz = ~~(Math.random()*360);
  p.style.MozTransform = p.style.webkitTransform = 'rotateX('+rx+'deg) rotateY('+ry+'deg) rotateZ('+rz+'deg) translate3d('+x+'px,'+y+'px,'+z+'px)';
  p.style.background = 'hsl('+rx+',100%,50%)'
  p.innerHTML = '&nbsp';
  c.appendChild(p);
}