Transiciones y transformaciones CSS3: desplazamiento, escala, rotacion, sesgar

Las transformaciones CSS ofrecen la posibilidad de modificar el desplazamiento, escala, rotación, sesgo de elementos y en combinación con las transiciones nos permite crear animaciones css modificando gradualmente sus propiedades. En este post vamos a explicar como trabajar con ellas.

Transiciones

Las transiciones permiten controlar la velocidad a la que se van a modificar las propiedades de un elemento inclusive se pueden aplicar curvas de aceleración permitiendo de esta forma crear animaciones.

Sintaxis

Para crear una transicion se pueden especificar las siguientes propiedades de forma individual como se muestra a continuación:

div{
/* Propiedad a animar, si se desean animar todas las propiedades se puede utilizar all*/
transition-property: background;
/* Duracion de la transicion*/
transition-duration: 2s;
/* Curva de aceleración a utilizar */
transition-timing-function: linear;
/* Tiempo de espera antes de iniciar la transición *
transition-delay: 1s;
background:rgb(98,19,125);
}

También se puede utilizar el método abreviado

div{
transition:background 2s linear 1s;
background:rgb(98,19,125);
}

Ahora vamos a hacer que el color de fondo cambie al pasar el mouse sobre el div

div:hover{background:rgb(198,150,25);}
Resultado

Transformaciones

Las transformaciones CSS permiten modificar el desplazamiento, la escala, rotación de un elemento y pueden ser en dos o tres dimensiones, en esta ocasión vamos a trabajar con elementos 2D

Desplazamiento

Para mover un elemento es necesario utilizar transform: translate(desplazamiento-x, desplazamiento-y) o si solo quieres desplazar el objeto por un eje puedes trabajar con translateX() o transleteY()

#desplazar{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#desplazar:hover{
-webkit-transform: translate(250px, 20px);
-moz-transform: translate(250px, 20px);
-o-transform: translate(250px, 20px);
-ms-transform: translate(250px, 20px);
transform: translate(250px, 20px);
}
Resultado

Escala

Para animar el tamaño de un elemento tenemos que trabajar con transform:scale(x,y) al igual la función anterior puedes escalar un solo eje utilizando scaleX() o scaleY()

#escalar{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#escalar:hover{
-webkit-transform: scale(2, .5);
-moz-transform: scale(2, .5);
-o-transform: scale(2, .5);
-ms-transform: scale(2, .5);
transform: scale(2, .5);
}
Resultado

Rotar

Para la rotación de un objeto se puede utilizar transform:rotate(grados), también nos permite rotar solo un eje cuando se trata de un objeto 3D utilizando rotateX(grados), rotateY(grados) o rotateZ(grados)

#rotacion{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#rotacion:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Resultado

Sesgar

Para sesgar un objeto debes utilizar transform: skew(angulo x, anguloy) o al igual que las anteriores también permite sesgar solo un eje utilizando skewX(angulo) o skewY(angulo)

#sesgo{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#sesgo:hover{
-webkit-transform: skew(25deg,180deg);
-moz-transform: skew(25deg,180deg);
-o-transform: skew(25deg,180deg);
-ms-transform: skew(25deg,180deg);
transform: skew(25deg,180deg);
}
Resultado

Varias transformaciones a la vez

Si deseas aplicar varias transformaciones a la vez solo tienes que encadenar las transformaciones, el orden en el que las apliques las transformaciones puede hacer que el efecto cambie

#transformaciones{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#transformaciones:hover{
-webkit-transform: translateX(200px) rotate(360deg) scale(.7) ;
-moz-transform: translateX(200px) rotate(360deg) scale(.7);
-o-transform: translateX(200px) rotate(360deg) scale(.7);
-ms-transform: translateX(200px) rotate(360deg) scale(.7);
transform: translateX(200px) rotate(360deg) scale(.7);
}
Resultado

Eso es todo en este post, en próximos post vamos a trabajar con animaciones 3D, aquí les dejo el demo con los ejemplos por si lo quieren descargar

demo

3 comentarios en “Transiciones y transformaciones CSS3: desplazamiento, escala, rotacion, sesgar”

  1. juan hoyos dice:

    hola, me gusto mucho el aporte, y para recibir lo nuevo que actualicen

  2. jan delors dice:

    Muchas gracias por un post tan ilustrativo.
    Acabo de aplicarlo a cuatro icon post de mi página web.

    De nuevo gracias

  3. hola, como hago para cambiar una propiedad de un div despues de un transition por ejemplo, hago que rote 180°, y despues lo quiero invisibilizar, porfa ayudenme, gracias!

Deja un comentario