Transformaciones 2D y 3D en CSS: Uso de la Propiedad Transform

Transform es una propiedad CSS que sirve para transformar un elemento HTML mediante funciones. Estas funciones permitirán trasladar, escalar, rotar o torcer a lo largo, ancho y profundidad del elemento.

Primero, revisaremos las propiedades para transformaciones 2D, es decir en un solo plano. Después, con algunas otras propiedades CSS aplicaremos transformaciones 3D.

Translate para transformaciones

Translate es una función de la propiedad “transform” que te permite trasladar un elemento HTML a través de los ejes del navegador. El valor que recibe puede ser una longitud (px, rem, etc.) o un porcentaje.

selector {
    transform: translate(10px, -10px);
    transform: translate(20%, -20%);
}

Dependiendo del eje en el que traslades el elemento, existe una función.

Tipo	Valor con los argumentos que recibe
Eje X y Y	translate(x,y)
Eje X	translateX(x)
Eje Y	translateY(y)
Eje Z	translateZ(z)
Múltiple	translate3d(x,y,z)

• Ejemplo usando translate(x,y).

• Ejemplo usando translateX(x) y translateY(y).

Contribución creada por Andrés Guano.