En diseño web, el punto cero o de partida, es la esquina superior izquierda, es la coordenada (0, 0), por lo tanto, cuando se desee incrementar el tamaño de un elemento, siempre será hacia abajo o a la derecha, no puede ser a la izquierda o arriba porque son valores negativos y una vez que los valores de las dimensiones sean negativos, el objeto deja de ser visible.
Sin embargo, se puede emular el efecto visual de crecimiento hacia los cuadro lados de la siguiente forma:
Supongamos que en el documento, tenemos un elemento div. Le añadimos estilos:
Código CSS:
Ver originaldiv {
width: 10em;
height: 10em;
top: 50%;
left: 50%;
margin: -5em 0 0 -5em;
position: absolute;
border: .2em #f00 solid;
}
Código Javascript
:
Ver original$("div").click(function(){
$(this).css({
"width": "+=10em",
"height": "+=10em",
"margin": "+=-5em 0 0 +=-5em"
});
});
Con los estilos aplicados, el elemento queda centrado y con un borde de color rojo, luego, cuando le de un clic al div, aumentará en 10 medidas escalares su altura y ancho, así como los márgenes superior e izquierdo que son los responsables de mantener centrado al elemento. De esta manera, el elemento seguirá creciendo hacia la derecha y abajo, pero su posición siempre será 5 medidas escalares menos de la anterior, esto debido a sus nuevas dimensiones. Se mantiene la proporción.
Saludos