Search code examples
csswebkit-transform

CSS Scale an element with 100% width

I am interested in zooming out a div with 100% width. The problem I am having, is when I scale the element out it gets a fixed width and no longer extends 100% of the width.

Example - http://jsfiddle.net/Fz7qh/2/

When I use the CSS zoom property (as opposed to transform: scale) it works as expected, but I hear the zoom property is not well supported. My question is can this be achieved with CSS transform scale?

Solution

  • To emulate what the zoom property does in this case, you can add -transform-origin: 0 0; and set the width to oldWidth / newScale (100 / 0.7 ~= 142.857143):

    http://jsfiddle.net/thirtydot/Fz7qh/5/

    div.zoomed {
    -webkit-transform: scale(.7);
    -webkit-transform-origin: 0 0;
    width: 142.857143%;
}​