Insertar transformaciones con CSS3

Hace unos meses publiqué un post sobre las transiciones CSS3 y hoy voy a hablar acerca del procedimiento para aplicar transformaciones a una web. Mediante esta opción de CSS3 podemos modificar la posición, forma y tamaño de un elemento. Hay que señalar que la propiedad únicamente nos muestra el resultado final de la variación, por lo que suele emplearse conjuntamente con animaciones o transiciones, de modo que los cambios se apliquen de manera progresiva y sean visibles para el usuario.

Existen transformaciones tanto en 2D, como en 3D. En este artículo, en concreto, me centro en las primeras.

translate

Traslada el elemento seleccionado en horizontal y vertical, según los ejes X e Y, respectivamente. Como en CSS el movimiento siempre va acorde con las agujas del reloj, si insertamos valores positivos se dirigirá hacia la derecha y abajo, mientras que el sentido opuesto precisa valores negativos.

En el siguiente ejemplo, voy a crear un desplazamiento de 50 píxeles a la derecha, a partir de una referencia específica al correspondiente eje (traslateX). Asimismo, incluyo el código adicional para que se visualice correctamente en los principales navegadores:

.ejemplo {
   transform: traslateX(50px);
   -webkit-transform: traslateX(50px); /* Chrome y Safari */
   -moz-transform: traslateX(50px); /* Firefox */
   -o-transform: traslateX(50px); /* Opera */
}

Ahora voy a desplazarlo 70 píxeles a la izquierda y 30 hacia abajo:

.ejemplo {
   transform: translate(-70px, 30px);
   -webkit-transform: translate(-70px, 30px);
   -moz-transform: translate(-70px, 30px);
   -o-transform: translate(-70px, 30px);
}

rotate

La implementación de esta propiedad también es muy sencilla, ya que sólo es preciso reseñar el ángulo de rotación. Como apuntaba antes, se moverá conforme al sentido horario.

.ejemplo {
   transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
}

scale

Otra interesante alternativa consiste en variar el tamaño, de acuerdo con una escala. En el código que puedes ver, a continuación, se aumenta la anchura y se reduce la altura a la mitad. El CSS, además, incorpora una transición de 2 segundos.

.ejemplo {
/* Transformación */
   transform: scale(1.5, 0.5);
   -webkit-transform: scale(1.5, 0.5);
   -moz-transform: scale(1.5, 0.5);
   -o-transform: scale(1.5, 0.5);
/* Transición */
   transition-duration: 2s;
   -webkit-transition-duration: 2s;
   -moz-transition-duration: 2s;
   -o-transition-duration: 2s;
}

Igualmente, es posible aplicar scale haciendo alusión a un eje en particular:

.ejemplo {
   transform: scaleX(3);
   -webkit-transform: scaleX(3);
   -moz-transform: scaleX(3);
   -o-transform: scaleX(3);
}

skew

Provoca una distorsión en las caras del elemento, inclinando sus lados dependiendo del ángulo indicado. En principio, no le veo mucha utilidad.

.ejemplo {
   transform: skew(20deg, 30deg);
   -webkit-transform: skew(20deg, 30deg);
   -moz-transform: skew(20deg, 30deg);
   -o-transform: skew(20deg, 30deg);
}

matrix

Este método es más complejo que los anteriores, pues combina diversas transformaciones en una sola. Sus parámetros son:

matrix(scaleX(), skewY() ,skewX(), scaleY(), translateX(), translateY())

Y el código podría ser algo así:

.ejemplo {
   transform: matrix(1, -0,5, 0, 1, 10, 10);
   -webkit-transform: matrix(1, -0,5, 0, 1, 10, 10);
   -moz-transform: matrix(1, -0,5, 0, 1, 10, 10);
   -o-transform: matrix(1, -0,5, 0, 1, 10, 10);
}

La web oficial de W3Schools proporciona una herramienta online, con la que probar distintas variantes:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_matrix1

transform-origin

Las transformaciones inician, por defecto, desde el centro del elemento en cuestión, si bien, transform-origin nos permite cambiar ese punto de partida. Esto se consigue con porcentajes:

.ejemplo {
   transform: rotate(30deg);
   transform-origin: 40% 70%;
   -webkit-transform: rotate(30deg);
   -webkit-transform-origin: 40% 70%;
   -moz-transform: rotate(30deg);
   -moz-transform-origin: 40% 70%;
   -o-transform: rotate(30deg);
   -o-transform-origin: 40% 70%;
}