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

I'm using jQuery to move an element vertically while also rotating along the Y axis, by using toggle class. I know that jQuery is applying the classes because translate3d() is moving the element vertically, and rotateY() is rotating the element. However, I have two issues:

1. perspective-origin has no effect on the perspective. Instead, the element flails weirdly between states.
2. perspective() has no effect unless defined in the final state and excluded from the initial state... ??

Here is the CSS I'm using:

Initial state:

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

Final state:

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

Hopefully that's enough information to spot the problem. I essentially have no control over the perspective of the animation.

I was initially changing the margin-top value, but wanted to start using 3d transforms for better animation performance.

I'm using Chrome desktop, which I keep updated.

Update: I've created a JSFiddle that essentially shows the problem. I know that I have a lot of prefixes in there, mostly because I don't know which prefixes are necessary. Hopefully this will at least get the idea across: Perspective isn't doing anything. JSFiddle: https://jsfiddle.net/56aq22dc/

The order in the transform functions is important

They are applied from right to left, so this

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

applies the perspective when the element isn't rotated, so it doesn't show.

It should be

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

first rotate, then translate and then apply the perspective

fiddle

This applies the perspective (or, better say, the perspective applied is noticeable). But since it applies it to the translated element, it is not centered.

If you want it centered, apply the perspective before the translatiion. Notice that the transform is evaluated right to left, so before means afterwards in the list

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

Notice that perspective-origin is useless when applying perspective as a function instead of a property.

fiddle