CSS zoom property

Question

Sitepoint reference says

Internet Explorer for Windows versions 5.5 and above support the non-standard property zoom, which sets the magnification scale of an element. There’s no CSS3 equivalent to this property (as yet).

How can I achieve this zoom effect in standard browsers? Any jQury plugins available?

Answer 1

The CSS3 equivalent is in the CSS 2D Transforms module, in particular transform: scale().

Because this module is still at Working Draft stage, you'll need browser-specific prefixes:

transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);

You may also need transform-origin (and browser-specific versions) to make it behave the same way as zoom, and you'll have to be careful to target zoom only at IE, because WebKit supports both transform and zoom so would double-scale.