Efectos transformaciones con html5 y css3

Vamos a ver una serie de efectos hover de transformaciones. Para ello, vamos a usar un formato como:

-moz-transform:
-webkit-transform:
-o-transform:
transform:

Una vez visto esto, simplemente tendremos que acabar de completar el código. Ello dependerá de la transformación que queramos realizar:

  • transform scale: va a ser la primera a explicar. Con ello vamos a conseguir que al pasar el ratón por encima del elemento, éste varíe su tamaño a uno que establezcamos. Veamos el código fuente para explicarlo después, es muy sencillo:
    div.scale:hover {
        -moz-transform:scale(1.5,1);
        -webkit-transform:scale(1.5,1);
        -o-transform:scale(1.5,1);
        transform:scale(1.5,1)
    }

    Solo hay que decir que está medido en valores absolutos. Se trata de un valor x para la ampliación horizontal y un eje y para la vertical (transform:scale(x,y)). Como he dicho antes, son valores absolutos en porcentaje, así un 1.5 sería un 50% de aumento y un 0.5 sería un 50% de disminución. En el ejemplo del código fuente, la capa, al pasar el ratón por encima, aumentaría un 50% en su eje x, manteniéndose al mismo tamaño en el y.

  • transform zoom: es muy parecido al anterior, con la diferencia de que en este caso se realiza un zoom, quiero decir que se aumentan ambos ejes en un mismo valor. Veamos como quedaría:
    div.zoom:hover {
        -moz-zoom:1.7;
        -webkit-zoom:1.7; 
        -o-zoom:1.7; 
        zoom:1.7; 
    }

    Los valores son como en el efecto anterior, siendo 2 un aumento de un 100% sobre el tamaño inicial y 0 una disminución del 100% sobre el tamaño inicial del elemento. En el caso del ejemplo, se aumentaría el tamaño de la capa un 70% al pasar el ratón por encima.

  • transform rotate: Con este efecto conseguiremos que la capa o elemento rote unos grados establecidos en el momento en que el cursor del ratón pase por encima. El código fuente sería algo como:
    div.rotate:hover {
        -moz-transform:rotate(10deg); 
        -webkit-transform:rotate(10deg); 
        -o-transform:rotate(10deg); 
        transform:rotate(10deg); 
    }

    En este caso, únicamente tendremos que establecer el valor en grados que deseamos que rote el elemento, y al pasar el ratón rotará ese valor en sentido de las agujas del reloj si es positivo o en sentido contrario si es negativo. En el ejemplo, rota 10 grados en sentido de las agujas del reloj.

  • transform skew: este es uno de los más difíciles de explicar, en este caso, giran los ejes horizontal y vertical una serie de grados establecidos, no gira el elemento unos grados, sino que lo que se realiza es una suma o disminución a los 90 grados de los ejes horizontales o verticales. El código fuente sería:
    div.skew:hover {
        -moz-transform:skewX(15deg); 
        -webkit-transform:skewX(15deg); 
        -o-transform:skewX(15deg); 
        transform:skewX(15deg); 
    }

    En el ejemplo, se restarían 15 grados a los 90 de la perpendicularidad de los ejes x con el eje inferior y. Se que me estoy liando, y que esto se ve mejor con un ejemplo, así que en el final del post hay un enlace a la página de los ejemplos, por si quieres verlo más claro. Solo acabar diciendo que skewX es para el eje x y skewY es para el y. Y que en positivo se restan y en negativo se suman.

  • transform translate: he dejado el más interesante y visible para el final. Éste evento va a conseguir transladar el elemento en cualquiera de los ejes unos pixels establecidos. El código fuente quedaría:
    div.translate:hover {
        -moz-transform:translateX(20px);
        -webkit-transform:translateX(20px);
        -o-transform:translateX(20px);
        transform:translateX(20px);
    }

    En éste ejemplo, al pasar el cursor sobre la capa, ésta se desplazará 20 píxeles a lo largo del eje x, podemos poner los valores negativos para que se desplace a la izquierda en lugar de a la derecha. O podemos poner transform:translateY(20 px) para que se translade a lo largo del eje Y. Da mucho juego a la hora de hacer menús, por ejemplo.

Si quieres ver ejemplos explicados de todo esto, entra en
Efectos transformaciones con html5 y css3

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: