Propiedad transform: función scale

Esta función tiene dos parámetros, el valor x para la escala horizontal y el valor y para la escala vertical. Si se declara solo un valor será aplicado a los dos parámetros.

Se pueden declarar números enteros y decimales para la escala, la cual es calculada usando una matriz. Valores entre 0 y 1 reducirán el elemento, el valor 1 mantiene las mismas proporciones y valores mayores de 1 incrementa las dimensiones del elemento de forma líneal.

Se consigue un efecto interesante usando valores negativos, si declaramos al menos uno de los valores negativos el elemento se invierte, produciendo un efecto espejo.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

}

#titulo{

font: bold 36px verdana, sans-serif;

}

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

transform:scale(1.5)

}

#titulo{

font: bold 36px verdana, sans-serif;

}

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

transform:scale(1.5, -1.5)

}

#titulo{

font: bold 36px verdana, sans-serif;

}

Se declaran dos funciones similares a scale() pero restringidas a la dimensión horizontal o vertical: scalex(), scaley(), esta función solo requieren un valor.