Zoom Vs. Scale in CSS3

Transform is more predictable than zoom across browsers.

Zoom affects positioning differently in different browsers.

example:
position:absolute; left:50px; zoom: 50%;

• Chrome will effectively compute the left value to 50px * 50%, that is 25px…but this is not reflected in DevTools Computed Values.
• IE will not change the left value at all.

Transform is handled the same way in all browsers (as far as I can tell).

example:
position:absolute; left:50px; transform: scale(0.5)

• left would effectively be set to 25px in both Chrome and IE. (DevTools Computed Values will not reflect this – it will display the source code only)
• To avoid changing the left value, simply use transform-origin: 0 0. That will ensure left is still 50px.

Demo: http://jsfiddle.net/4z728fmk/ shows 2 boxes where the small one is zoomed or scaled to 50%. Looks like this:

EDIT: Added Firefox in 2016. At the time it was the most problematic browser out of the three, as zoom:50% had no effect at all. And with transform: scale(0.5) the borders around the inner box have different thickness… but that could be a subpixel issue