1006968 - translate3d has x and y values switched.

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, defect)

Description

[email]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:28.0) Gecko/20100101 Firefox/28.0 (Beta/Release)
Build ID: 20140314220517

Steps to reproduce:

I applied with the following styles to a div:

transform: perspective(700px) rotate3d(1, 1, 0, 180deg) translate3d(200px, 0px, 0px);

I then animated this property to:

transform: rotate3d(1, 1, 0, 0deg) translate3d(0, 0, 0);


Actual results:

In Firefox the div animated up from 200px instead of from the right at 200px. All other browsers animate in from the left as per the following spec:

--------------------- Source MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function

Syntax

translate3d(tx, ty, tz)

Values

tx
    Is a {{ xref_csslength() }} representing the abscissa of the translating vector.
ty
    Is a {{ xref_csslength() }} representing the ordinate of the translating vector.
tz
    Is a {{ xref_csslength() }} representing the z component of the translating vector. It can't be a {{ xref_csspercentage() }} value; in that case the property containing the transform is considered invalid.

------------------------


Expected results:

The element should have animated from right to left 200px. My best guess is that the 180degree rotation is resetting the origins. Is this expected functionality?

I set up the following pen to demonstrate.
http://codepen.io/nickspiel/pen/rCLuD

Comment 1

[Boris Zbarsky [:bzbarsky]]

If I take out the perspective bit, the behavior ends up matching other browsers.  Which makes sense, because then all the components of the transform have the same types, and are interpolated independently.

With the perspective there, though, the interpolation happens on the transform matrices directly.  It's possible this is related to bug 937494...