分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了带有旋转和翻译问题的CSS透视图，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

另外,无论视角如何,translateY和rotateX都能完美地工作.但是,组合时,它仅适用于基于窗口大小和rotateY值的某些透视图

在this jsFiddle它按照我想要的窗口尺寸工作.问题是我希望透视值更低,大约250px,但我不能在不破坏动画的情况下这样做.

我尝试使用更高的rotateY度而不是使透视更低,但同样的问题发生

@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进行了测试,这似乎是一个一致的问题

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

解决方法

尝试将透视设置为父元素的单独规则(而不是动画中变换的一部分).

.parent {
    perspective: 250px;
}

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

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

我的推理：

>在动画期间,视角不会改变,因此将动画视为动画的一部分毫无意义.
>由于您的元素占据父元素区域的100％,因此在父元素上设置透视图应该产生与在元素本身上设置它相同的结果(在变换内部).
>它似乎解决了你的问题(见上面的小提琴).

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