DEV Community

Discussion on: A JavaScript interview question asked at Facebook

vince_tblt profile image
Vincent Thibault

Awesome ! You did a really great job !
The only problem I see : they failed on 3D initial parameter (translateZ(1px)) :

  • The webanimation failed because you handle a 3D matrix as a 2D matrix, making it failed.
  • The matrix version failed because it reset the 3D matrix to a 2D matrix.

So you need to make use of matrix.is2D (or check for /matrix3d/ to change the algorithm used but its seems quite painful to do.

Here is a solution of the problem without the need of parsing the matrix data (just generate a 2D translation matrix and multiply it to the current matrix), with this solution you don't need to care about the 2D-3D stuff : jsfiddle.net/vthibault/9Lqyphkm/

Thread Thread
richardeschloss profile image
Richard Schloss

I updated to include 3d, and also to account for when the animation ends, in case it's desired to chain the animation calls. I still prefer to directly set the parameters instead of performing the multiply operation (which can be a lot of multiply-add operations, and a potential source rounding errors if floating points are used).