Why is CSS matrix3d rendered faster than CSS position?

Question

Let's say I want to to move an element from left to the right, I can achieve this by doing

 transform: translate3d(200px,0,0);
 /*or*/
 transform: translateX(200px);

or

 transform: matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,200,x,x,x)

or just set left position.

Why is CSS matrix3d rendered faster than just setting a position left/top?

UPDATE:

CSS animation of top/left vs transform in slow-mo.

high performance animations on HTML5

Answer 1

There are 2 factors than are relevant here

1) Because left can potentially affect all the layout in your page, so it forces a recalculate of style and layout. Transforms do not need this step, the transforms do not afect the element neighbours.

see html5 - high performance animations for a better explanation

2) Because most 3d work is handled by the GPU and not by the CPU. The GPU not only can do that much faster, it also frees the CPU to handle better the rest of the work. You will see a lot of times the style

transform: translateZ(0px);

wich obviously does nothing, but that makes the broser use the GPU and accelerates the process. You could try to measure changes to left with this line added and see what the perfomance is.