Position of the cards doesn't consider the height properly

[Zack90]

Cards are rendered so that it is possible to see the ones behind before the active one. This works perfectly, but if the cards dimensions are set to width: 500px; height: 500px, then the ones in the back are hidden.

I have started to play with the demo to check the origin of this issue, and I have realised that it is due to the transform: translate3d() scale() css property applied to each <td-card></td-card>.

I see that inside ionic.tdcards2.js, the function which takes care of ordering the cards is connected to the var sortCards inside the directive tdCards:

var cards;
var existingCards, card;
var i, j;
var sortCards = function() {
  existingCards = $element[0].querySelectorAll('td-card');
  for(i = 0; i < existingCards.length; i++) {
    card = existingCards[i];
    card.currentIndex = i;
    if(!card) continue;
    if(i > 0) {
      (function(j) {
        $timeout(function() {
          var top = (j * 25);
          var scale = Math.max(0, (1 - (j / 10)));
          var animation = collide.animation({
            duration: 800,
            percent: 0,
            reverse: false
          })
          .easing({
            type: 'spring',
            frequency: 5,
            friction: 250,
            initialForce: false
          })
          .on('step', function(v) {
            existingCards[j].style.transform = existingCards[j].style.webkitTransform = 'translate3d(0, ' + top*v + 'px, 0) scale('+ scale*v +')';
          })
          .start();
        }, 100 * j);
      })(i);
    }
    card.style.zIndex = (existingCards.length - i);
  }
};

I think that the issue is caused by the variables top and scale. Is there a reason why these variables are defined in the following way? Could they be improved by considering also the dimensions of the cards?

Thanks in advance for your reply!!