polycardwar-components-card-fan.html

<template is="dom-repeat" items="{{data}}">
  <game-card style$="{{calcMargin(reverse, index, cardWidth)}}" class="card-in-stack" rank="{{item}}" card-width="[[cardWidth]]" card-height="[[cardHeight]]">
  </game-card>
</template>
<style include="shared-styles">
  .card-in-stack {
    position: absolute;
  }
</style>

polycardwar-components-card-fan.js

calcMargin: function(reverse, index, cardWidth) {
  //console.log('Calculating the margin for reverse ' + reverse + ' index ' + index + ' width ' + cardWidth);
  //Margin is 1/4 of a card width for every index, based on fan direction
  var margin = 'margin-' + (reverse ? 'right' : 'left') + ': ' + Math.floor(index * (cardWidth / 4)) + 'px;';
  //z-index is based on index, so stack is correct
  var zidx = 'z-index: ' + (index + 2) + ';';
  //position for absolute edge of card, based on fan direction
  var position = (reverse ? 'right' : 'left') + ': 0;';
  return margin + zidx + position;
},