Xitrus está alojado en:
Anteriormente comenté que CSS3 nos permitía hacer cosas de la altura de Flash (en el artículo sobre como rotar elementos) y hoy os voy a enseñar otra función que tiene la propiedad Transiction, la de escalar elementos (scale).
En este ejemplo al pasar por encima de los elementos tomarán la propiedad scale() que está escrita en su itnerior.
Dentro de la propiedad transition debemos de insertar la función scale(), que tiene dos formas de usarse, la primera es poner la escala total (como el ejemplo del medio o de las esquinas que solo tienen un número) o diferenciar la escala del eje X y el eje Y (como en los demás ejemplos).
Nota: puede ser necesario usar delante de transition los prefijos de los navegadores como -webkit-, -moz- y demás.
- transform: scale(1.5);
- transform: scale(1.5,0.5);
Esta función tiene bastantes usos, y uno de ellos es poder voltear elementos (o espejar, como queramos llamarlo) y se puede hacer de forma vertical, horizontal o combinando ambas, estableciendo valores negativos a la escala.
Voy a hacer un par de ejemplos col el volteo horizontal y vertical, respectivamente, de un texto, pero podría usarse para voltear imágenes de forma fácil.
- transform: scale(-1,1);
- transform: scale(1,-1);
Xitrus está alojado en: