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

Question

我正在尝试制作一种仅使用 CSS 的幻灯片从一个内容部分到另一个内容部分的过渡。为了以一种有趣的方式这样做，我使用 CSS 的 perspective 和 rotateX 来实质上放置页面内容。然后我尝试使用translateY将内容滑向屏幕底部

另外，无论perspective 是什么，translateY 和rotateX 都可以完美运行。但是，当结合使用时，它仅适用于基于窗口大小和rotateY 值的某些perspectives

在this 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

仅比 myajouri 答案略有改进。

至少在 Chrome 中，你可以写

@-webkit-keyframes slide {
  0% { -webkit-transform: perspective(50vh); }
  10%,15% { -webkit-transform: perspective(50vh) rotateX(30deg) translateY(0%); }
  50%,100% { -webkit-transform: perspective(50vh) rotateX(30deg) translateY(100%);  }
}

将视角设置为视口高度应该比当前设置更具响应性

demo

（未在其他浏览器中测试）

Answer 2

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

.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/