<div id="skills" class="container-fluid amg-skills">
  <div class="row amg-badge-collection">
    <div class="col-xs-3 amg-badge">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/173442/HTML5_Badge.svg" alt="HTML5">
      <h3>EXPERT</h3>
    </div>
    <div class="col-xs-3 amg-badge">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/173442/CSS3_Badge.svg" alt="CSS3">
      <h3>EXPERT</h3>
    </div>
    <div class="col-xs-3 amg-badge">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/173442/JS_Badge.svg" alt="JavaScript">
      <h3>EXPERT</h3>
    </div>
    <div class="col-xs-3 amg-badge">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/173442/JQ_Badge.svg" alt="JQuery">
      <h3>EXPERT</h3>
    </div>
  </div>
</div>

.amg-skills {
  max-width: 960px;
}
.amg-badge-collection {
  background: #151515;
}	
.amg-badge {
  padding: 20px 5%;
}
.amg-badge h3 {
  margin: 0;
  line-height: 50px;
  text-align: center;
  color: #FFFFFF;
}

@media only screen and (max-width : 639px) {
  .amg-badge {
    width: 50%;
    padding: 20px 10%;
  }
}

$(function(){

// Rotate Skill Badges
var $badges = $(".amg-badge img");

function rotateBadge(passedBadge, speed){
  var rotateSpeed = speed / 180,
      current = 0;

  function badgeRotation(passedBadge){
    current = (current == 90) ? 271 : current + 1;

    passedBadge.css({
      "-webkit-transform":"rotate3d(0,1,0," + current + "deg)",
      "-moz-transform":"rotate3d(0,1,0," + current + "deg)",
      "transform":"rotate3d(0,1,0," + current + "deg)"
    });

    if (current == 360) {
      clearInterval(rotateInterval);
      passedBadge.removeAttr('style').removeClass('spinning');
    }
  }

  var rotateInterval = setInterval(function(){badgeRotation(passedBadge)}, rotateSpeed);
}

$badges.mouseenter(function(){
  if ($(this).hasClass('spinning')) {
    return false;
  } else {
    rotateBadge($(this), 500);
    $(this).addClass('spinning');
  }
});

});