[gamedever]

scale, which is an argument to transform, changes the size something is rendered but it takes the same space as it took before you scaled.

zoom changes the size it takes up in the page and draws it larger as well.

To put another way

    <div style="width: 10px; height: 10px; transform: scale(20)"></div>

takes 10x10 css pixels of layout space but is displayed scaled up 20x

    <div style="width: 10px; height: 10px; zoom: 20"></div>

makes the element take 200x200 css pixels of layout space AND displays it scaled up 20x

https://jsfiddle.net/zwL16koj/

It might sound confusing but scale is an argument to transform, it is not its own thing

    transform: scale(20) rotate(45deg) ...

[disconcision]

you can use scale as an attribute independently from transform. this is essentially a shorthand but you can write `<div style="width: 10px; height: 10px; scale: 20"></div>` and it works just fine