Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
26
11

Hacer zoom o escalar elementos

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.

Ejemplo de escalado de elementos con transform scale().
scale(0.5,1.5)
scale(1,1.5)
scale(1.5)
scale(0.5,1)
scale(1)
scale(1.5,1)
scale(0.5)
scale(1,0.5)
scale(1.5,0.5)

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.

  1. transform: scale(1.5);
  2. transform: scale(1.5,0.5);

Volter elementos

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.

Xitrus
  1. transform: scale(-1,1);
Xitrus
  1. transform: scale(1,-1);


Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: