0

我正在使用 jQuery 通过使用切换类来垂直移动元素，同时沿 Y 轴旋转。我知道 jQuery 正在应用这些类，因为 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。我知道我有很多前缀，主要是因为我不知道哪些前缀是必要的。希望这至少能传达这个想法：Perspective 没有做任何事情。JSFiddle：https ://jsfiddle.net/56aq22dc/

4

1 回答 1

2

变换函数的顺序很重要

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

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

当元素不旋转时应用透视，所以它不显示。

它应该是

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

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

小提琴

这适用于透视（或者，更好地说，应用的透视是明显的）。但是由于它将它应用于翻译的元素，因此它没有居中。

如果您希望它居中，请在翻译之前应用透视。请注意，转换是从右到左进行评估的，因此之前在列表中表示之后

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

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

小提琴

于 2015-06-26T21:02:09.913 回答