1329340 - 3D CSS Transform animation moves in wrong direction on Firefox

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[Juan Riquelme]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20170106004019

Steps to reproduce:

I made a demo https://jsbin.com/pohatug/edit?html,css,output to show the problem.
I also tried this in Firefox 50 with the same result.


Actual results:

In Chrome (and Vivaldi) the 3D CSS transform behaves correctly (the bottom moves to the inside, depth, while the top moves towards us), while in Firefox the behaviour is almost the opposite: the bottom moves towards us and up, while the top moves to inside, depth.

It can be tricky to see it, you need to zoom it and still eyes can trick you, but that's the behaviour that I observe.


Expected results:

The 3D CSS transform  animation should behave correctly, just as in Chrome. The bottom should move to the inside while the top moves towards us, as translateZ(-1rem) rotateX(90deg) dictates.