dno-3d

HTML

<div id="container"></div>

CSS

body {
  overflow: hidden;
}

.el {
  width: 32px;
  height: 32px;
  background: #ccc;
  position: absolute;
  left: 0;
  top: 0;
  background: url('http://thecatapi.com/api/images/get?format=src&type=gif');
  background-size: cover;
  background-repeat: no-repeat;
}

JavaScript

const fov = 200;
let particles = [];

class Particle {

	constructor() {
  	this.x = Math.floor(Math.random() * 600);
    this.y = Math.floor(Math.random() * 600);
    this.z = -Math.floor(Math.random() * 200);
    this.scale = 1;
    this.speed = Math.floor(Math.random() * 2) + 1;
    this.el = document.createElement('div');
    this.el.className = 'el';
    document.getElementById('container').appendChild(this.el);
  }

}

for(let j = 0; j < 100; j++) {
	particles.push(new Particle());
}

function moveParticle(p) {

	p.z -= p.speed;
  p.scale = fov / (p.z + fov);
  p.x3d = p.x * p.scale;
  p.y3d = p.y * p.scale;
  
  if(p.z < -(fov - 10)) {
  	p.x = Math.floor(Math.random() * 600);
    p.y = Math.floor(Math.random() * 600);
    p.z = Math.floor(Math.random() * 200);
  }
  
  p.el.style.left = p.x3d + 'px';
  p.el.style.top = p.y3d + 'px';
  
  p.el.style.width = 32 * p.scale + 'px';
  p.el.style.height = 32 * p.scale + 'px';
  
  p.el.style.zIndex = -p.z;
  p.el.style.opacity = -(p.z / 100) + 0.8;

}

function thing() {
  setTimeout(function() {
    for(let i = 0; i < particles.length; i++) {
    	moveParticle(particles[i]);
    }
    thing();
  }, 10);
};

thing();

console.log(particles);