CSS perspective with rotate & translate issue

I am attempting to make a type of CSS only slide transition from one content section to another. In order to do so in an interesting way, I use CSS's perspective and rotateX to in essence lay down the page content. I then am trying to slide the content out towards the bottom of the screen using translateY

Separately, both the translateY and the rotateX work perfectly, no matter what the perspective is. However, when combined, it only works with certain perspectives based on the window size and rotateY value

In this jsFiddle it works as I would like it to in the window sizes I have tried. The problem is that I would like the perspective value to be lower, around 250px, but I cannot do so without breaking the animation.

I tried using a higher rotateY degree instead of making the perspective lower but the same issue occurs

@keyframes slide {
  0% { transform: perspective(450px); }
  25% { transform: perspective(450px) rotateX(30deg); }
  50%,100% { transform: perspective(450px) rotateX(30deg) translateY(100%);  }
}

I have tested this on CSS Deck and jsFiddle both in FireFox and Chrome and it seems to be a consistent issue

Can anyone provide me with a reason why this is happening and offer a work around?