带有旋转和翻译问题的CSS透视图

我试图使一种类型的CSS仅从一个内容部分滑动到另一个内容部分.为了以有趣的方式这样做,我使用CSS perspective并rotateX实质上放下页面内容.然后我尝试使用内容将内容滑出到屏幕底部translateY

另外,无论是translateY和rotateX工作完美,无论是什么perspective是.但是,组合时,它仅适用于perspective基于窗口大小和rotateY值的某些s

在这个jsFiddle中,它在我尝试的窗口大小中按照我的意愿工作.问题是我希望perspective价值更低250px,但我不能在不打破动画的情况下这样做.

我尝试使用更高的rotateY学位,而不是perspective降低,但同样的问题发生

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

我已经在FireFox和Chrome上对CSS Deck和jsFiddle进行了测试,这似乎是一个一致的问题

任何人都可以告诉我为什么会发生这种情况并提供解决方案吗？