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

Question

我试图使一种类型的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进行了测试,这似乎是一个一致的问题

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

Answer 1

尝试将 设为perspective父元素上的单独规则（而不是作为 的一部分transform）animation。

.parent {
    perspective: 250px;
}

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

更新的小提琴： http: //jsfiddle.net/myajouri/DYpnU/

我的推理：

1. 在动画过程中不会perspective改变，因此将其作为动画的一部分是没有意义的。

2. 由于您的元素占据父级区域的 100%，因此perspective在父级上设置 应该产生与在元素本身（内部transform）上设置它相同的结果。

3. 它似乎解决了你的问题（参见上面的小提琴）。

更新：经过更多实验，我发现translateY(0)在动画中显式设置初始值也可以解决问题。

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

更新的小提琴： http://jsfiddle.net/myajouri/YJS3v/