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
There is a sample on the page, but the difference is that scale preserves the original bounding box of the object, but zoom doesn’t. So with scale, the layout of the page won’t change at all. If you make it smaller it will just pad it with space to the original size.
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
takes 10x10 css pixels of layout space but is displayed scaled up 20x makes the element take 200x200 css pixels of layout space AND displays it scaled up 20xhttps://jsfiddle.net/zwL16koj/
It might sound confusing but scale is an argument to transform, it is not its own thing
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
A thumb-rule I try to ask developers/designers to do — Scale in CSS and leave the Zoom to the user.
css noob here, sorry i still don't get it, perhaps a better visual showing what page layout looks like on both views
There is a sample on the page, but the difference is that scale preserves the original bounding box of the object, but zoom doesn’t. So with scale, the layout of the page won’t change at all. If you make it smaller it will just pad it with space to the original size.