Emulating CSS Zoom with CSS3 transform Scale

CSS zoom is non standard property , it is implemented in webkit(chrome, safari) browsers , IE also implements it . But it will not work in Firefox, and I think there are some behaviour differences between the IE and webkit implementation.

The main difference between transform scale and zoom is , zoom will modify the box sizing of the element being zoomed, while transform scale will not change original height and width of the element, while scaling only the displayed output.

transform: scale(50%); There will be empty spacing around the scaled element.

zoom: 50%; There won’t be any spacing around the zoomed element.

Here are two approaches to simulate zoom with transform scale.

1. Wrap the transformed element with div which has height and width set to the scaled size of transformed element. For example , if your 50% scaled element has a size of 100px * 100px, set the wrapper to 50px * 50px
2. Using margins on transformed element Set margin left, right as (actualWidth-scaledWidth)/2 , and top, bottom as (actualHeight-scaledHeight)/2. In case of scaling down you will be using negative margins. Incase you want to center with margin: auto, this method will not work, as you are already using margins to size the item.