Cubes Killer

Cubes Killer.markdown

Cubes Killer

A Pen by jacks on CodePen.

License.

index.html

<div class="container">
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
</div>

script.js

var c = document.querySelector('.container');
var cubs = [];
for(var i = 0; i < c.children.length; i++){
  if(c.children[i].className == 'cube'){
    var cube = c.children[i];
    var l = document.createElement('div');
    var r = document.createElement('div');
    var t = document.createElement('div');
    var b = document.createElement('div');
    var f = document.createElement('div');
    var bk = document.createElement('div');
    var le = document.createElement('span');
    var re = document.createElement('span');
    var mouth = document.createElement('span');

    l.className = 'left';
    r.className = 'right';
    t.className = 'top';
    b.className = 'bottom';
    f.className = 'front';
    bk.className = 'back';
    le.className = 'leftEye';
    re.className = 'rightEye';
    mouth.className = 'mouth';
    
    f.appendChild(le);
    f.appendChild(re);
    f.appendChild(mouth);
    cube.appendChild(l);
    cube.appendChild(r);
    cube.appendChild(t);
    cube.appendChild(b);
    cube.appendChild(f);
    cube.appendChild(bk);
    
    for(n = 0; n < cube.children.length; n++){
      cube.children[n].style.position = 'absolute';
      cube.children[n].style.height = '50px';
      cube.children[n].style.width = '50px';
      cube.children[n].style.backgroundColor = 'hsl(' + ((360 / c.children.length)*i) + ', 40%, ' + ( 30 + (n*10)) + '%)';
    }
    f.style.webkitTransform = 'translateZ(25px)';
    bk.style.webkitTransform = 'translateZ(-25px)';
    l.style.webkitTransform = 'rotateY(90deg) translateZ(-25px)';
    r.style.webkitTransform = 'rotateY(90deg) translateZ(25px)';
    t.style.webkitTransform = 'rotateX(90deg) translateZ(25px)';
    b.style.webkitTransform = 'rotateX(90deg) translateZ(-25px)';
    
    cubs.push(new cub(i));
  }
}

function cub(index){
  this.index = index;
  this.x = c.offsetLeft - (c.offsetWidth/2) + cube.offsetLeft + (cube.offsetWidth/2);
  this.y = c.offsetTop - (c.offsetHeight/2) + cube.offsetTop + (cube.offsetHeight/2);
}

for(var i = 0; i < c.children.length; i++){
  var ch = c.children[i];
  ch.addEventListener('click',function(){
    if(this.id !== 'killed'){
      this.setAttribute('id','killed');
    }else{
      this.setAttribute('id','');
    }
  });
}

document.addEventListener('mousemove',function(e){
  for(var i = 0; i < c.children.length; i++){
    var elem = c.children[i];
    var posX = ((e.clientX-cubs[i].x)/window.innerWidth)*110;
    var posY = (-1 *(e.clientY-cubs[i].y)/window.innerHeight)*110;
    elem.style.webkitTransform = 'rotateY(' + posX + 'deg) rotateX(' + posY + 'deg)';
  }
});

style.css

body,
html{
  margin: 0;
  padding: 0;
  background: #333;
}
.container,
.cube{
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.container{
  -webkit-perspective: 800px;
  perspective: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 0;
}
.cube{
  cursor: pointer;
  display: inline-block;
  height: 50px;
  width: 50px;
  margin: 30px;
}


.leftEye,
.rightEye{
  transition-duration: .2s;
  -webkit-transition-duration: .2s;
  position: absolute;
  top: 5px;
  height: 20px;
  width: 8px;
  background: #000;
}
.leftEye{left: 10px;}
.rightEye{right: 10px;}
.mouth{
  transition-duration: .2s;
  -webkit-transition-duration: .2s;
  position: absolute;
  bottom: 10px;
  width: 70%;
  left: 15%;
  height: 5px;
  background-color: #000;
}
.cube:hover .leftEye{left: 15px;}
.cube:hover .rightEye{right: 15px;}
.cube:hover .mouth{
  height: 10px;
  width: 14%;
  left: 43%;
  border-radius: 100%;
}
#killed{
  -webkit-animation: killed 5s linear infinite;
  animation: killed 5s linear infinite;
  opacity: .5;
}
#killed .leftEye{
  -webkit-transform: translateX(3px) rotateZ(50deg);
  transform: translateX(3px) rotateZ(50deg);
  width: 4px;
  height: 15px;
}
#killed .rightEye{
  -webkit-transform: translateX(-3px) rotateZ(-50deg);
  transform: translateX(-3px) rotateZ(-50deg);
  width: 4px;
  height: 15px;
}
#killed .mouth{
  height: 20px;
  width: 50%;
  left: 25%;
  bottom: 5px;
  border-radius: 5px;
}


@-webkit-keyframes killed {
  from { -webkit-transform: rotateX(0) rotateY(0); }
  to { -webkit-transform: rotateX(360deg) rotateY(360deg); }
}
@keyframes killed {
  from { transform: rotateX(0) rotateY(0); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}