扑克牌桌卡效果

Question

我做了一个例子只是为了展示我现在的情景，我想让cards数组交错显示在每个玩家的关闭而不是中间，就像我现在做的那样。任何人都可以告诉我如何实现这种效果？如果你能分叉那个很棒的codepen演示。

// just for example
var cards = ['Cards', 'Cards', 'Cards', 'Cards'];

cards.map(function(card) {
  var cardTemp = '<span class="player-card">' + card + '</span>';

  $('.table').append(cardTemp);
});


TweenMax.staggerTo(".player-card", 1, {
  rotation: 360,
  y: 100
}, 0.5);

.table {
  position: relative;
  max-width: 700px;
  height: 300px;
  border: 1px solid black;
  margin: auto;
}
.dealer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  background-color: green;
}
.players {
  position: absolute;
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: orange;
  color: #fff;
}
.players:nth-child(1) {
  top: 0;
  left: 0;
}
.players:nth-child(2) {
  top: 0;
  right: 0;
}
.players:nth-child(3) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.players:nth-child(4) {
  right: 0;
  bottom: 0;
}
.players:nth-child(5) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.players:nth-child(6) {
  left: 0;
  bottom: 0;
}
.players:nth-child(7) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.player-card {
  position: absolute;
  display: block;
  width: 50px;
  height: 30px;
  background-color: red;
  color: #fff;
  text-align: center;
  line-height: 30px;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="table">
  <div class="dealer">Dealer</div>
  <div class="players">Player</div>
  <div class="players">Player</div>
  <div class="players">Player</div>
  <div class="players">Player</div>
  <div class="players">Player</div>
  <div class="players">Player</div>
  <div class="players">Player</div>
  <div class="players">Player</div>

</div>