Self-Assembling Cube

Just playing around with VelocityJS

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Self-Assembling Cube</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="wrapper">
  <div id="stage"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/velocity/0.0.9/jquery.velocity.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 700px;
  height: 700px;
  padding: 100px;
  margin: auto;
  transform: translateY(150px);
}

#stage {
  display: block;
  position: relative;
  height: 500px;
  width: 500px;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -webkit-transform: rotateX(80deg) rotateY(0deg) rotateZ(250deg);
  background: grey;
}

.cube {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
}
.cube div {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  opacity: 0.5;
}
.cube .back {
  transform: translateZ(0) rotateY(180deg);
}
.cube .right {
  transform: rotateY(-270deg) translateX(0);
  transform-origin: top right;
}
.cube .left {
  transform: rotateY(270deg) translateX(0);
  transform-origin: center left;
}
.cube .top {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
}
.cube .bottom {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
}
.cube .front {
  transform: translateZ(100px);
}
/* Downloaded from https://www.codeseek.co/ */
$(function() {
	var $stage = $('#stage'),
		coords = shuffle(generateCoords());

	function createCube() {
		return $('<div class="cube">' +
					'<div class="front"></div>' +
					'<div class="back"></div>' +
					'<div class="top"></div>' +
					'<div class="bottom"></div>' +
					'<div class="left"></div>' +
					'<div class="right"></div>' +
				'</div>');
	}

	function appendAndAnimate(count) {
		count = count || 0;

		var xyz = coords.pop();

		var cube = createCube().velocity({
			translateZ: xyz[0] * 100 + 'px',
			translateX: xyz[1] * 100 + 'px',
			translateY: xyz[2] * 100 + 'px'
		});

		$stage.append(cube);
	}

	function scheduleCube (count) {
		count -= 1;

		if (count > 0) {
			setTimeout(function() {
				appendAndAnimate(count);
				scheduleCube(count);
			}, 200);
		}
	}

	function shuffle(array) {
		var currentIndex = array.length, temporaryValue, randomIndex ;

		// While there remain elements to shuffle...
		while (0 !== currentIndex) {

			// Pick a remaining element...
			randomIndex = Math.floor(Math.random() * currentIndex);
			currentIndex -= 1;

			// And swap it with the current element.
			temporaryValue = array[currentIndex];
			array[currentIndex] = array[randomIndex];
			array[randomIndex] = temporaryValue;
		}

		return array;
	}

	function generateCoords() {
		var arr = [];
			for (var i = 0; i < 5; i++) {
				for (var j = 0; j < 5; j++) {
					for (var k = 0; k < 5; k++) {
						arr.push([i, j, k]);
					}
				}
			}
		return arr;
	}

	scheduleCube(126);

});

This awesome code ( Self-Assembling Cube ) is write by Josh Moncrieff, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Josh Moncrieff