translate3d() & rotateY() 工作，但透视原点不工作......为什么？

translate3d() & rotateY() working, but perspective-origin not working... why?

我正在使用 jQuery 通过切换 class 垂直移动元素，同时沿 Y 轴旋转。我知道 jQuery 正在应用 classes 因为 translate3d() 垂直移动元素，而 rotateY() 旋转元素。但是，我有两个问题：

  1. perspective-origin对透视没有影响。相反，该元素在状态之间奇怪地摇摆不定。
  2. perspective() 除非在最终状态中定义并从初始状态中排除，否则没有效果... ??

这是我正在使用的CSS：

初始状态：

transform:translate3d(0px,-210px,0px) rotateY(-90deg);
perspective-origin: center center;

最终状态：

transform: translate3d(0px,-110px,0px) rotateY(0deg) perspective(100px);
perspective-origin: center center;

希望这些信息足以发现问题。我基本上无法控制动画的视角。

我最初是在更改 margin-top 值，但想开始使用 3d 变换以获得更好的动画性能。

我正在使用 Chrome 桌面，我会不断更新它。

更新： 我创建了一个基本上显示问题的 JSFiddle。我知道我在那里有很多前缀，主要是因为我不知道哪些前缀是必要的。希望这至少能让人明白：透视没有任何作用。 JSFiddle：https://jsfiddle.net/56aq22dc/

转换函数中的顺序很重要

它们是从右到左应用的，所以这个

transform:  translate3d(0px,0px,0px) rotateY(45deg) perspective(100px);

在元素未旋转时应用透视图，因此不显示。

应该是

transform:  perspective(100px) translate3d(0px,-50px,0px) rotateY(45deg);

先旋转，然后平移，再应用透视

fiddle

这应用了透视图（或者更准确地说，应用的透视图很明显）。但是因为它把它应用到翻译后的元素上，所以它没有居中。

如果您希望它居中，请在翻译之前应用视角。请注意，转换是从右到左计算的，因此在列表中之前意味着之后

transform: translate3d(0px,-50px,0px) perspective(600px) rotateY(80deg);

请注意，当将透视作为函数而不是 属性 应用时，透视原点是无用的。

fiddle