Hace mucho tiempo que venía dándole vueltas a hacer un tutorial básico que tratara el tema de las transformaciones y transiciones en CSS3. Este tipo de técnica nos permite crear transformaciones de elementos HTML o incluso animarlos sin tener que recurrir para ello a JavaScript. Al hacer uso de las transformaciones mediante hojas de estilo los cálculos se los dejamos a la GPU en vez de dejar que sea la CPU quien se encargue de esta tarea, por lo que dependiendo del caso las animaciones tienden a ser más suaves y precisas debido a que este tipo de tareas permiten trabajar con números no enteros.
En este primer tutorial nos vamos a centrar en las transformaciones en dos dimensiones, en próximos tutoriales profundizaremos más y entraremos a ver las transformaciones en tres dimensiones.
Para la realización de este tutorial se ha eliminado del código de ejemplo los prefijos (-webkit y -moz) para hacerlo más corto y fácil de entender pero la utilización de estos sigue siendo necesaria hasta el momento, a no ser que utilicemos librerías como prefix-free o al compilar los ficheros CSS usemos alguna herramienta para lograrlo. Por otro lado se han eliminado los estilos que dan forma y estilo a los elementos, sólo se han incluido los estilos que se relacionan con las transformaciones o las transiciones. En los ficheros de descarga sí estarán todos los estilos necesarios.
Transformaciones en CSS3
Las transformaciones que podemos realizar a los elementos HTML son las siguientes:
- trasladar
- rotar
- escalar
- sesgar
Trasladar
Para trasladar un elemento HTML en dos dimensiones debemos usar las siguientes propiedades:
| Propiedad | Descripción |
|---|---|
| translateX(x) | Traslada un elemento en el eje de las X |
| translateY(y) | Traslada un elemento tomando en el eje de las Y |
| translate(x, y) | Traslada un elemento en ambos ejes (X e Y) |
Trasladar en el eje de las X
/* ESTILO HOVER */
#container:hover .circle1{ transform: translateX(50px); }
#container:hover .circle2{ transform: translateX(277px); }
#container:hover .circle3{ transform: translateX(504px); }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Trasladar en el eje de las Y
/* ESTILO HOVER */
#container:hover .circle1{ transform: translateY(20px); }
#container:hover .circle2{ transform: translateY(60px); }
#container:hover .circle3{ transform: translateY(100px); }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Trasladar en ambos ejes (X e Y)
/* ESTILO BASE */
#container .circle1{ transform: translate(0, -90px); }
#container .circle2{ transform: translate(77.942px, -45px); }
#container .circle3{ transform: translate(77.942px, 45px); }
#container .circle4{ transform: translate(0, 90px); }
#container .circle5{ transform: translate(-77.942px, 45px); }
#container .circle6{ transform: translate(-77.942px, -45px); }
/* ESTILO HOVER */
#container:hover .circle1{transform: translate(0, -150px); }
#container:hover .circle2{ transform: translate(129.904px, -75px); }
#container:hover .circle3{ transform: translate(129.904px, 75px); }
#container:hover .circle4{ transform: translate(0, 150px); }
#container:hover .circle5{ transform: translate(-129.904px, 75px); }
#container:hover .circle6{ transform: translate(-129.904px, -75px); }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Rotar
Para rotar un elemento HTML en dos dimensiones deberemos usar la siguiente propiedad:
| Propiedad | Descripción |
|---|---|
| rotate(angle) | Rota un elemento en el valor del ángulo definido |
/* ESTILO HOVER */
#container:hover .square1{ transform: rotate(10deg); }
#container:hover .square2{ transform: rotate(20deg); }
#container:hover .square3{ transform: rotate(30deg); }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Escalar
Para escalar un elemento HTML en dos dimensiones debemos usar las siguientes propiedades:
| Propiedad | Descripción |
|---|---|
| scaleX(x) | Escala un elemento en el eje de las X |
| scaleY(y) | Escala un elemento en el eje de las Y |
| scale(x, y) | Escala un elemento en ambos ejes (X e Y) |
Escalar en el eje de las X
/* ESTILO HOVER */
#container:hover .square1{ transform: scaleX(1.25); }
#container:hover .square2{ transform: scaleX(1.5); }
#container:hover .square3{ transform: scaleX(2); }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Escalar en el eje de las Y
/* ESTILO HOVER */
#container:hover .square1{ transform: scaleY(1.25); }
#container:hover .square2{ transform: scaleY(1.5); }
#container:hover .square3{ transform: scaleY(2); }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Escalar en ambos ejes
/* ESTILO HOVER */
#container:hover .square1{ transform: scale(1.25, 2); }
#container:hover .square2{ transform: scale(1.5, 1.5); }
#container:hover .square3{ transform: scale(2, 1.25); }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Sesgar
Para sesgar en dos dimensiones un elemento HTML debemos usar las siguientes propiedades:
| Propiedad | Descripción |
|---|---|
| skewX(angle) | Sesga un elemento en el eje de las X |
| skewY(angle) | Sesga un elemento en el eje de las Y |
| skew(angleX, angleY) | Sesga un elemento en ambos ejes (X e Y) |
Sesgar en el eje de las X
/* ESTILO HOVER */
#container:hover .square1{ transform: skewX(20deg); }
#container:hover .square2{ transform: skewX(30deg); }
#container:hover .square3{ transform: skewX(40deg); }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Sesgar en el eje de las Y
/* ESTILO HOVER */
#container:hover .square1{ transform: skewY(20deg); }
#container:hover .square2{ transform: skewY(30deg); }
#container:hover .square3{ transform: skewY(40deg); }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Sesgar en ambos ejes
/* ESTILO HOVER */
#container:hover .square1{ transform: skew(10deg, 40deg); }
#container:hover .square2{ transform: skew(30deg, 30deg); }
#container:hover .square3{ transform: skew(40deg, 10deg); }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Transiciones en CSS3
Las transiciones nos permiten animar un elemento HTML. Usando transiciones logramos que los cambios no se ejecuten de manera inmediata si no que se apliquen gradualmente creando una animación. Hay dos parámetros que son obligatorios para hacer una transición en CSS3, uno es el que define qué propiedades se verán afectadas por la transición (transition-property) y el otro es la duración de la misma (transition-duration):
Propiedad transition-property
Básicamente especifica la propiedad o propiedades que se verán afectadas por una transición, las demás propiedades que queden fuera no se animarán y se ejecutarán de manera inmediata. Si se deseara que todas las propiedades se vieran afectadas se situaría este parámetro en «all».
Propiedad transition-duration
Especifica la duración de la transición en segundos o milisegundos, si este valor no se especifica tomará valor cero y la transición no ocurrirá de manera animada sino que se ejecutará de golpe.
Veamos como usar estos parámetros usando uno de los ejemplos anteriores y a continuación iremos explicado el resto de parámetros opcionales que podemos usar en una transición en CSS3.
Código CSS
/* ESTILO BASE */
.square{
background: #e87a24;
transition-duration: 1s;
transition-property: transform, background;
}
/* ESTILO HOVER */
#container:hover .square1{
background: #cb6414;
transform: rotate(10deg);
transition-duration: 0.5s;
}
#container:hover .square2{
background: #a74e09;
transform: rotate(20deg);
transition-duration: 1s;
}
#container:hover .square3{
background: #7c3904;
transform: rotate(30deg);
transition-duration: 1.5s;
}Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Propiedad transition-timing-function
Especifica la curva de velocidad que adquirirá la animación, definirá en gran medida el efecto con que se animará el elemento HTML. Estos son los valores principales que se le pueden asignar a dicha propiedad:
/* ESTILO BASE */
.circle{
background: #e87a24;
transition-duration: 1s;
transition-property: transform, background;
}
/* ESTILO HOVER */
#container:hover .circle{ transform: translateY(120px); }
#container .circle1{ transition-timing-function: ease; }
#container .circle2{ transition-timing-function: ease-in; }
#container .circle3{ transition-timing-function: ease-out; }
#container .circle4{ transition-timing-function: ease-in-out; }
#container .circle5{ transition-timing-function: linear; }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Propiedad transition-delay
Especifica en segundos o milisegundos un retardo antes de comenzar la animación, veamos un ejemplo con una de las transformaciones anteriores:
Código CSS
/* ESTILO BASE */
.circle{
background: #e87a24;
transition-duration: 1s;
transition-property: transform;
}
#container .circle1{ transform: translate(0, -90px); }
#container .circle2{
transform: translate(77.942px, -45px);
transition-delay: 0.25s;
}
#container .circle3{
transform: translate(77.942px, 45px);
transition-delay: 0.35s;
}
#container .circle4{
transform: translate(0, 90px);
transition-delay: 0.45s;
}
#container .circle5{
transform: translate(-77.942px, 45px);
transition-delay: 0.55s;
}
#container .circle6{
transform: translate(-77.942px, -45px);
transition-delay: 0.65s;
}
/* ESTILO HOVER */
#container:hover .circle1{ transform: translate(0, -150px) scale(0.75, 0.75); }
#container:hover .circle2{ transform: translate(129.904px, -75px) scale(0.65, 0.65); }
#container:hover .circle3{ transform: translate(129.904px, 75px) scale(0.55, 0.55); }
#container:hover .circle4{ transform: translate(0, 150px) scale(0.45, 0.45); }
#container:hover .circle5{ transform: translate(-129.904px, 75px) scale(0.35, 0.35); }
#container:hover .circle6{ transform: translate(-129.904px, -75px) scale(0.25, 0.25); }Resultado (entra y saca el mouse del cuadro)
Descarga los ficheros de ejemplo.
Notación abreviada
Las propiedades de una transición, al igual que otras propiedades CSS, admiten notación abreviada, la sintaxis es la siguiente:
transition: transition-property transition-duration transition-timing-function transition-delay;Por lo que las siguientes propiedades:
.circle{
transition-property: all;
transition-duration: 1.25s;
transition-timing-function: ease-in;
transition-delay: 1s;
}Se podrían resumir en una sola línea como:
.circle{
transition: all 1.25s ease-in 1s;
}Este es un tema bastante extenso así que en futuros tutoriales abordaremos con más profundidad las transformaciones y transiciones en CSS3 aumentando la complejidad de las mismas.
(4 votos, promedio: 4,00 de 5)
Puedes situar fragmentos de código dentro de etiquetas <pre></pre> y código HTML o XML entre etiquetas <xmp></xmp>.