Переместить div наружу от веера карты в зависимости от его вращения?

socket.on('hand', function(hand){
    console.info("kaarten gekregen");
      var node = document.getElementById("cardwrap");
      node.innerHTML = ''; //remove all cards in the hand
      var perCardRotate = 90 / hand.length;   //calculate the rotation per card
      var perCardRotate = perCardRotate.toString().trim();
      for(var i=0; i < hand.length; i++){  //for loop to create all cards
      var subnode = document.createElement("a");
      subnode.setAttribute("class", "card");
      subnode.setAttribute("name", i);
      subnode.setAttribute("id", i);
      subnode.setAttribute("onclick", "PickCard(getAttribute('name'))");
      var textnode = document.createTextNode(hand[i]);
      var image = document.createElement("img");
      image.setAttribute("src", "/client/img/" + hand[i] + ".png");
      image.setAttribute("zIndex", i + 1000);
      image.setAttribute("id", i + "CARD")
      subnode.appendChild(image);
      node.appendChild(subnode);

      perCardRotateString = (i * perCardRotate )- 45 + (parseFloat(perCardRotate) / 2) //calculate the rotation of the current card being made
      var perCardTranslateString = (0.03 * Math.pow(perCardRotateString, 2)); //calculate how far the card needs to be moved down based on: y=(0.03 X)^2

      document.getElementById(i + "CARD").setAttribute('style', "transform: rotate("+ perCardRotateString + 'deg) translateY( '+ perCardTranslateString +'px)'); //set rotation and translation

    }
  });

#hand{
  /* margin-left: auto;
  margin-right: auto;*/
  width: 100%;
  position: absolute;
  float: left;
  align-content: center;
  margin-top: 200px;
  max-width: 1180px;
  margin-left: 60px;
}

.card{
  position: relative;
  top: 0px;
  transition: top ease 0.5s;
  margin-left: -60px;
}

.card:hover{
  top: -20px;
}

img{
  width: 110px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
}

<div id = "cardwrap">
    <a class = "card" name = "0" id = "0" onclick = "PickCard(getAttribute('name'))">
        <img src = "/client/img/as.png" zindex = "1000" id = "0CARD" style = "transform: rotate(-38.57142857142857deg) translateY( 44.63265306122448px)">
    </a>
    <a class = "card" name = "1" id = "1" onclick = "PickCard(getAttribute('name'))">
        <img src = "/client/img/3d.png" zindex = "1001" id = "1CARD" style = "transform: rotate(-25.714285714285708deg) translateY( 19.836734693877542px)">
    </a>
    <a class = "card" name = "2" id = "2" onclick = "PickCard(getAttribute('name'))">
        <img src = "/client/img/4c.png" zindex = "1002" id = "2CARD" style = "transform: rotate(-12.857142857142856deg) translateY( 4.959183673469386px)">
    </a>
    <a class = "card" name = "3" id = "3" onclick = "PickCard(getAttribute('name'))"><img src = "/client/img/5s.png" zindex = "1003" id = "3CARD" style = "transform: rotate(-1.7763568394002505e-15deg) translateY( 9.466330862652141e-32px)">
    </a>
</div>