CSS escala un elemento con 100% de ancho

css3 webkit-transform

Question

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

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

Cuando uso la propiedad de zoom CSS (a diferencia de la transformación: escala) funciona como se esperaba, pero escucho que la propiedad de zoom no está bien soportada. Mi pregunta es ¿se puede lograr esto con la escala de transformación CSS?

Answer 1

Para emular lo que hace la propiedad de zoom en este caso, puede agregar -transform-origin: 0 0; y establezca el width en oldWidth / newScale ( 100 / 0.7 ~= 142.857143 ):

jsfiddle.net/thirtydot/Fz7qh/5

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