CSS Escala un elemento con un ancho del 100%

Question

Estoy interesado en reducir un div con un ancho del 100%. El problema que tengo es que cuando escalo el elemento obtiene un ancho fijo y ya no se extiende al 100% del ancho.

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

Cuando uso la propiedad CSS zoom (en contraposición a transformar: escala) funciona como se esperaba, pero he oído la propiedad de zoom no está bien soportado. Mi pregunta es, ¿se puede lograr esto con la escala de transformación CSS?

Answer 1

Para emular lo que la propiedad no zoom en este caso, se puede añadir -transform-origin: 0 0; y establecer el width-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%; 
}​