CubeTronic

Inspired by @thebabydino Pyramid scheme - http://codepen.io/thebabydino/pen/zgstq

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CubeTronic</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

<meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="overlay"></div>
	
<div class="cubes-wrap">
	<div class="cube cube-1">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

	<div class="cube cube-2">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

	<div class="cube cube-3">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

	<div class="cube cube-4">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>	
	
	<div class="cube cube-1 cube-blur">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>  
  
	<div class="cube cube-2 cube-blur">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>  
  
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
  position: relative;
  font-family: lato;
  color: #fff;
  background: #172F30;
  background-image: -webkit-radial-gradient(center center, 50% 50%, #0a1414, #172F30);
}

.overlay {
  position: absolute;
  z-index: 100;
  opacity: 0.2;
  height: 100%;
  width: 100%;
  background: #0ff url(http://jurbank.com/pens/images/noise.png);
}

.cubes-wrap {
  -webkit-animation: anim-float 5s infinite ease-in-out;
          animation: anim-float 5s infinite ease-in-out;
  line-height: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-left: 0px;
  margin-top: 0px;
}

.cube-1 {
  z-index: 1;
  position: relative;
  width: 180px;
  height: 180px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  line-height: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-left: -90px;
  margin-top: -90px;
  -webkit-animation: anim-1 1.5s infinite ease-in-out;
          animation: anim-1 1.5s infinite ease-in-out;
  opacity: 0.2;
}
.cube-1 div {
  position: absolute;
  height: 180px;
  width: 180px;
}
.cube-1 div:nth-child(1) {
  -webkit-transform: translateZ(90px);
          transform: translateZ(90px);
}
.cube-1 div:nth-child(2) {
  -webkit-transform: translateZ(90px);
          transform: translateZ(90px);
  -webkit-transform: rotateY(90deg) translateZ(90px);
          transform: rotateY(90deg) translateZ(90px);
}
.cube-1 div:nth-child(3) {
  -webkit-transform: translateZ(90px);
          transform: translateZ(90px);
  -webkit-transform: rotateY(180deg) translateZ(90px);
          transform: rotateY(180deg) translateZ(90px);
}
.cube-1 div:nth-child(4) {
  -webkit-transform: translateZ(90px);
          transform: translateZ(90px);
  -webkit-transform: rotateY(-90deg) translateZ(90px);
          transform: rotateY(-90deg) translateZ(90px);
}
.cube-1 div:nth-child(5) {
  -webkit-transform: translateZ(90px);
          transform: translateZ(90px);
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(90px);
          transform: rotateX(-90deg) rotate(180deg) translateZ(90px);
}
.cube-1 div:nth-child(6) {
  -webkit-transform: translateZ(90px);
          transform: translateZ(90px);
  -webkit-transform: rotateX(90deg) translateZ(90px);
          transform: rotateX(90deg) translateZ(90px);
}
.cube-1 > div {
  background: #ff3333;
  background: -webkit-linear-gradient(left, #ff3333 20%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, #ff3333 20%, rgba(0, 0, 0, 0) 100%);
}

@-webkit-keyframes anim-1 {
  0% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
  50% {
    -webkit-transform: rotateY(60deg) rotateX(45deg);
            transform: rotateY(60deg) rotateX(45deg);
  }
  100% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
}

@keyframes anim-1 {
  0% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
  50% {
    -webkit-transform: rotateY(60deg) rotateX(45deg);
            transform: rotateY(60deg) rotateX(45deg);
  }
  100% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
}
.cube-2 {
  z-index: 1;
  position: relative;
  width: 90px;
  height: 90px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  line-height: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-left: -45px;
  margin-top: -45px;
  -webkit-animation: anim-2 0.75s infinite ease-in-out;
          animation: anim-2 0.75s infinite ease-in-out;
  opacity: 0.2;
}
.cube-2 div {
  position: absolute;
  height: 90px;
  width: 90px;
}
.cube-2 div:nth-child(1) {
  -webkit-transform: translateZ(45px);
          transform: translateZ(45px);
}
.cube-2 div:nth-child(2) {
  -webkit-transform: translateZ(45px);
          transform: translateZ(45px);
  -webkit-transform: rotateY(90deg) translateZ(45px);
          transform: rotateY(90deg) translateZ(45px);
}
.cube-2 div:nth-child(3) {
  -webkit-transform: translateZ(45px);
          transform: translateZ(45px);
  -webkit-transform: rotateY(180deg) translateZ(45px);
          transform: rotateY(180deg) translateZ(45px);
}
.cube-2 div:nth-child(4) {
  -webkit-transform: translateZ(45px);
          transform: translateZ(45px);
  -webkit-transform: rotateY(-90deg) translateZ(45px);
          transform: rotateY(-90deg) translateZ(45px);
}
.cube-2 div:nth-child(5) {
  -webkit-transform: translateZ(45px);
          transform: translateZ(45px);
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(45px);
          transform: rotateX(-90deg) rotate(180deg) translateZ(45px);
}
.cube-2 div:nth-child(6) {
  -webkit-transform: translateZ(45px);
          transform: translateZ(45px);
  -webkit-transform: rotateX(90deg) translateZ(45px);
          transform: rotateX(90deg) translateZ(45px);
}
.cube-2 > div {
  background: #ff3333;
  background: -webkit-linear-gradient(left, #ff3333 20%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, #ff3333 20%, rgba(0, 0, 0, 0) 100%);
}

@-webkit-keyframes anim-2 {
  0% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
  50% {
    -webkit-transform: rotateY(60deg) rotateX(45deg);
            transform: rotateY(60deg) rotateX(45deg);
  }
  100% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
}

@keyframes anim-2 {
  0% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
  50% {
    -webkit-transform: rotateY(60deg) rotateX(45deg);
            transform: rotateY(60deg) rotateX(45deg);
  }
  100% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
}
.cube-3 {
  z-index: 1;
  position: relative;
  width: 60px;
  height: 60px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  line-height: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-left: -30px;
  margin-top: -30px;
  -webkit-animation: anim-3 0.5s infinite ease-in-out;
          animation: anim-3 0.5s infinite ease-in-out;
  opacity: 0.2;
}
.cube-3 div {
  position: absolute;
  height: 60px;
  width: 60px;
}
.cube-3 div:nth-child(1) {
  -webkit-transform: translateZ(30px);
          transform: translateZ(30px);
}
.cube-3 div:nth-child(2) {
  -webkit-transform: translateZ(30px);
          transform: translateZ(30px);
  -webkit-transform: rotateY(90deg) translateZ(30px);
          transform: rotateY(90deg) translateZ(30px);
}
.cube-3 div:nth-child(3) {
  -webkit-transform: translateZ(30px);
          transform: translateZ(30px);
  -webkit-transform: rotateY(180deg) translateZ(30px);
          transform: rotateY(180deg) translateZ(30px);
}
.cube-3 div:nth-child(4) {
  -webkit-transform: translateZ(30px);
          transform: translateZ(30px);
  -webkit-transform: rotateY(-90deg) translateZ(30px);
          transform: rotateY(-90deg) translateZ(30px);
}
.cube-3 div:nth-child(5) {
  -webkit-transform: translateZ(30px);
          transform: translateZ(30px);
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(30px);
          transform: rotateX(-90deg) rotate(180deg) translateZ(30px);
}
.cube-3 div:nth-child(6) {
  -webkit-transform: translateZ(30px);
          transform: translateZ(30px);
  -webkit-transform: rotateX(90deg) translateZ(30px);
          transform: rotateX(90deg) translateZ(30px);
}
.cube-3 > div {
  background: #ff3333;
  background: -webkit-linear-gradient(left, #ff3333 20%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, #ff3333 20%, rgba(0, 0, 0, 0) 100%);
}

@-webkit-keyframes anim-3 {
  0% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
  50% {
    -webkit-transform: rotateY(60deg) rotateX(45deg);
            transform: rotateY(60deg) rotateX(45deg);
  }
  100% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
}

@keyframes anim-3 {
  0% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
  50% {
    -webkit-transform: rotateY(60deg) rotateX(45deg);
            transform: rotateY(60deg) rotateX(45deg);
  }
  100% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
}
.cube-4 {
  z-index: 1;
  position: relative;
  width: 45px;
  height: 45px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  line-height: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-left: -22.5px;
  margin-top: -22.5px;
  -webkit-animation: anim-4 0.375s infinite ease-in-out;
          animation: anim-4 0.375s infinite ease-in-out;
  opacity: 0.2;
}
.cube-4 div {
  position: absolute;
  height: 45px;
  width: 45px;
}
.cube-4 div:nth-child(1) {
  -webkit-transform: translateZ(22.5px);
          transform: translateZ(22.5px);
}
.cube-4 div:nth-child(2) {
  -webkit-transform: translateZ(22.5px);
          transform: translateZ(22.5px);
  -webkit-transform: rotateY(90deg) translateZ(22.5px);
          transform: rotateY(90deg) translateZ(22.5px);
}
.cube-4 div:nth-child(3) {
  -webkit-transform: translateZ(22.5px);
          transform: translateZ(22.5px);
  -webkit-transform: rotateY(180deg) translateZ(22.5px);
          transform: rotateY(180deg) translateZ(22.5px);
}
.cube-4 div:nth-child(4) {
  -webkit-transform: translateZ(22.5px);
          transform: translateZ(22.5px);
  -webkit-transform: rotateY(-90deg) translateZ(22.5px);
          transform: rotateY(-90deg) translateZ(22.5px);
}
.cube-4 div:nth-child(5) {
  -webkit-transform: translateZ(22.5px);
          transform: translateZ(22.5px);
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(22.5px);
          transform: rotateX(-90deg) rotate(180deg) translateZ(22.5px);
}
.cube-4 div:nth-child(6) {
  -webkit-transform: translateZ(22.5px);
          transform: translateZ(22.5px);
  -webkit-transform: rotateX(90deg) translateZ(22.5px);
          transform: rotateX(90deg) translateZ(22.5px);
}
.cube-4 > div {
  background: #ff3333;
  background: -webkit-linear-gradient(left, #ff3333 20%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, #ff3333 20%, rgba(0, 0, 0, 0) 100%);
}

@-webkit-keyframes anim-4 {
  0% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
  50% {
    -webkit-transform: rotateY(60deg) rotateX(45deg);
            transform: rotateY(60deg) rotateX(45deg);
  }
  100% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
}

@keyframes anim-4 {
  0% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
  50% {
    -webkit-transform: rotateY(60deg) rotateX(45deg);
            transform: rotateY(60deg) rotateX(45deg);
  }
  100% {
    -webkit-transform: rotateY(30deg) rotateX(45deg);
            transform: rotateY(30deg) rotateX(45deg);
  }
}
.cube-blur > div {
  -webkit-filter: blur(0px);
          filter: blur(0px);
}

@-webkit-keyframes anim-float {
  0% {
    top: 50%;
  }
  50% {
    top: 47%;
  }
  100% {
    top: 50%;
  }
}

@keyframes anim-float {
  0% {
    top: 50%;
  }
  50% {
    top: 47%;
  }
  100% {
    top: 50%;
  }
}
@media only screen and (max-width: 600px) {
  .cube-blur > div {
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( CubeTronic ) is write by John Urbank, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © John Urbank