JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="stage">
</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  perspective:500px;
  transform-style:preserve-3d;
}
.stage{
  position:absolute;
  top:50%;
  left:50%;
  height:0px;
  width:0px;
  overflow:visible;
  transform-style:preserve-3d;
 transform: translateZ(-1000px);
}
@keyframes orbit{
  0% { transform: translateZ(-1000px) rotateY(0deg); }
  100% { transform: translateZ(-1000px) rotateY(360deg); }
}
figure.rain{
  width:50px;
  height:50px;
  margin-left:-25px;
  margin-top:-25px;
  left:50%;
  top:50%;
  transform-style:preserve-3d;
  transform: translateY(0px) !important;
}
figure.rain:before{
  content:"";
  background-image:url(http://aninoob.com/particles/assets/weather/rain/raindrop.png);
  width:50px;
  height:50px;
  display:block;
  position:absolute;
  animation:rain infinite 2s linear;
  animation-delay: inherit !important;
}
figure.rain:after{
  content:"";
  background-image:url(http://aninoob.com/particles/assets/weather/rain/raindrop.png);
  width:50px;
  height:50px;
  display:block;
  position:absolute;
  animation:rainside infinite 2s linear;
  animation-delay: inherit !important;
}
@keyframes rain {
  0% { background-image:url(http://aninoob.com/particles/assets/weather/rain/raindrop.png); transform: translateY(-1500px); opacity:0.5; }
  80% { background-image:url(http://aninoob.com/particles/assets/weather/rain/raindrop.png); transform: translateY(200px); opacity:0.7; }
  82% { background-image:url(http://aninoob.com/particles/assets/weather/rain/rainsplash.png); transform: translateY(200px); opacity:0.8; }
  100% { background-image:url(http://aninoob.com/particles/assets/weather/rain/rainsplash.png); transform: translateY(180px); opacity:0.2; }
}
@keyframes rainside {
  0% { background-image:url(http://aninoob.com/particles/assets/weather/rain/raindrop.png); transform: rotateY(90deg) translateY(-1500px); opacity:0.5; }
  80% { background-image:url(http://aninoob.com/particles/assets/weather/rain/raindrop.png); transform:...

JavaScript

numberofobjects = 50;

for(i=0;i<numberofobjects;i++){

	var figure = $('<figure class="rain"></figure>');
  
  var x = Math.round(Math.random()*1000)-500;
  var z = Math.round(Math.random()*1000)-500;
  
  figure.css('transform','translateX(' + x + 'px) translateZ(' + z + 'px)');
  figure.css('animation-delay',parseInt(i*(numberofobjects*10)) + 'ms');
  $('.stage').append(figure);

}