我使用jQuery通过使用切换类垂直移动元素，同时沿Y轴旋转。我知道jQuery正在应用这些类，因为translate3d（）正在垂直移动元素，而rotateY（）正在旋转元素。但是，我有两个问题：
以下是我使用的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/
答案 0 :(得分：1)
转换函数中的顺序很重要
它们从右到左应用，所以这个
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);
请注意，将perspective作为函数而不是属性应用时，perspective-origin是无用的。