Question

我正在尝试将一种类型的CSS幻灯片从一个内容部分转换到另一个内容部分。为了以有趣的方式这样做，我使用CSS的perspective和rotateX来实质上放下页面内容。然后我尝试使用translateY

将内容滑出到屏幕底部

另外，无论translateY是什么，rotateX和perspective都能完美运作。但是，合并后，它仅适用于基于窗口大小和perspective值

的某些rotateY s

在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

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

.parent {
    perspective: 250px;
}

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

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

我的推理：

perspective在动画期间不会改变，所以没有必要将它作为动画的一部分。
由于您的元素占据父区域的100％，因此在父级上设置perspective应该产生与在元素本身上设置相同的结果（在transform内）。
它似乎可以解决您的问题（请参阅上面的小提琴）。

更新：经过更多实验后，我发现在动画中明确设置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/

Answer 2

与myajouri的回答相比只有轻微的改善。

在Chrome中使用leats，您可以编写

@-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

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

旋转＆amp;的CSS透视图翻译问题

2 个答案: