Tutorial CSS: Transformaciones 2D

Desplazamiento con translate(X/Y) y coordenadas

El desplazamiento es una de las transformaciones más básicas y útiles en CSS. Nos permite mover elementos en el plano bidimensional sin afectar al flujo normal del documento. Esto significa que podemos desplazar visualmente un elemento sin que los demás elementos de la página se vean afectados por este movimiento.

La función translate() es la encargada de realizar estos desplazamientos en CSS. Esta función acepta valores que indican la distancia que queremos mover el elemento desde su posición original, tanto en el eje horizontal (X) como en el vertical (Y).

Sintaxis básica

La función translate() puede utilizarse de varias formas:

.elemento {
  transform: translate(x, y);   /* Desplazamiento en ambos ejes */
  transform: translateX(valor); /* Solo desplazamiento horizontal */
  transform: translateY(valor); /* Solo desplazamiento vertical */
}

Donde:

• x representa el desplazamiento horizontal
• y representa el desplazamiento vertical

Unidades de medida para translate

Podemos utilizar diferentes unidades de medida para especificar la distancia del desplazamiento:

• Píxeles (px): Unidad absoluta que especifica una distancia exacta.
• Porcentaje (%): Relativo al tamaño del propio elemento.
• em/rem: Relativas al tamaño de la fuente.
• vw/vh: Relativas al tamaño de la ventana del navegador.

Veamos un ejemplo sencillo:

.caja {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform: translate(50px, 30px);
}

En este ejemplo, el elemento con clase .caja se desplazará 50 píxeles hacia la derecha y 30 píxeles hacia abajo desde su posición original.

Desplazamiento horizontal con translateX()

Si solo necesitamos mover un elemento horizontalmente, podemos utilizar la función translateX():

.boton-deslizante {
  background-color: #2ecc71;
  padding: 10px 20px;
  transform: translateX(20px); /* Desplaza 20px a la derecha */
}

Un valor positivo mueve el elemento hacia la derecha, mientras que un valor negativo lo mueve hacia la izquierda:

.elemento-izquierda {
  transform: translateX(-50px); /* Desplaza 50px a la izquierda */
}

Desplazamiento vertical con translateY()

De manera similar, para mover elementos solo verticalmente, utilizamos translateY():

.titulo-flotante {
  font-size: 24px;
  transform: translateY(-15px); /* Desplaza 15px hacia arriba */
}

Un valor positivo mueve el elemento hacia abajo, mientras que un valor negativo lo mueve hacia arriba.

Uso de porcentajes

Una característica muy útil de translate() es la posibilidad de usar porcentajes. Cuando usamos porcentajes, el desplazamiento se calcula en relación al tamaño del propio elemento:

.tarjeta {
  width: 200px;
  height: 150px;
  background-color: #f1c40f;
  transform: translate(50%, 25%);
}

En este ejemplo, el elemento se desplazará una distancia igual al 50% de su propio ancho hacia la derecha y un 25% de su propia altura hacia abajo.

Centrado perfecto con translate

Una aplicación muy común de translate() es el centrado absoluto de elementos. Combinando posicionamiento absoluto con translate(-50%, -50%), podemos centrar perfectamente un elemento:

.elemento-centrado {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Este método es muy efectivo porque:

1. top: 50% y left: 50% posicionan la esquina superior izquierda del elemento en el centro del contenedor
2. translate(-50%, -50%) mueve el elemento hacia atrás la mitad de su propio ancho y altura

Combinando translate con otras propiedades

El desplazamiento con translate() se puede combinar con otras propiedades CSS para crear efectos interesantes:

.boton {
  padding: 10px 20px;
  background-color: #3498db;
  transition: transform 0.3s ease;
}

.boton:hover {
  transform: translateY(-5px); /* El botón se eleva al pasar el cursor */
}

En este ejemplo, creamos un efecto de "elevación" cuando el usuario pasa el cursor sobre el botón.

Sistema de coordenadas en CSS

Es importante entender el sistema de coordenadas en CSS para trabajar eficientemente con translate():

• El origen (0,0) está en la esquina superior izquierda del elemento
• El eje X aumenta hacia la derecha
• El eje Y aumenta hacia abajo


Ejemplo práctico: Menú deslizante

Veamos un ejemplo práctico de cómo podríamos usar translate() para crear un menú que se desliza al pasar el cursor:

.menu-item {
  position: relative;
  padding: 10px;
  background-color: #3498db;
  color: white;
  overflow: hidden;
}

.menu-item .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #2980b9;
  width: 100%;
  transform: translateY(-100%); /* Oculto inicialmente */
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-item:hover .submenu {
  transform: translateY(0); /* Visible al hacer hover */
  opacity: 1;
}

En este ejemplo, el submenú está inicialmente oculto (desplazado hacia arriba) y se vuelve visible (se desplaza a su posición normal) cuando el usuario pasa el cursor sobre el elemento del menú.

Consideraciones de rendimiento

El uso de translate() para desplazamientos tiene ventajas de rendimiento sobre otras técnicas:

• Las transformaciones como translate() son procesadas por la GPU, lo que las hace más eficientes
• A diferencia de cambiar top, left, margin, etc., translate() no provoca un recálculo completo del diseño (reflow)

/* Menos eficiente - causa reflow */
.elemento-ineficiente {
  position: relative;
  left: 50px;
  top: 30px;
}

/* Más eficiente - usa la GPU */
.elemento-eficiente {
  transform: translate(50px, 30px);
}

Compatibilidad con navegadores

La propiedad transform y la función translate() tienen un excelente soporte en navegadores modernos. Sin embargo, para garantizar la compatibilidad con navegadores más antiguos, podemos usar prefijos de proveedor:

.elemento {
  -webkit-transform: translate(50px, 30px); /* Safari, Chrome antiguos */
  -moz-transform: translate(50px, 30px);    /* Firefox antiguo */
  -ms-transform: translate(50px, 30px);     /* IE */
  transform: translate(50px, 30px);         /* Estándar */
}

En la práctica actual, estos prefijos rara vez son necesarios, pero es bueno conocerlos para proyectos que requieran compatibilidad con navegadores muy antiguos.

Escalado con scale(X/Y) y proporción

El escalado es una transformación que nos permite cambiar el tamaño de un elemento HTML sin afectar el flujo del documento. A diferencia de modificar directamente las propiedades width y height, el escalado mediante la función scale() permite cambiar las dimensiones de un elemento manteniendo su posición en el flujo de la página.

La función scale() forma parte de las transformaciones 2D de CSS y nos permite aumentar o reducir el tamaño de un elemento tanto horizontal como verticalmente.

Sintaxis básica del escalado

Podemos aplicar el escalado de varias formas:

.elemento {
  transform: scale(factor);         /* Escala uniforme en ambos ejes */
  transform: scale(factorX, factorY); /* Escala diferente para cada eje */
  transform: scaleX(factor);        /* Solo escala horizontal */
  transform: scaleY(factor);        /* Solo escala vertical */
}

El factor de escala funciona de la siguiente manera:

• 1: Representa el tamaño original (100%)
• > 1: Aumenta el tamaño (por ejemplo, 2 = 200% del tamaño original)
• < 1: Reduce el tamaño (por ejemplo, 0.5 = 50% del tamaño original)
• Valores negativos: Invierten el elemento (efecto espejo)

Escalado uniforme

Cuando queremos escalar un elemento manteniendo sus proporciones originales, utilizamos un único valor:

.zoom-element {
  width: 200px;
  height: 150px;
  background-color: #3498db;
  transform: scale(1.5); /* Aumenta a 150% del tamaño original */
}

Este código aumentará tanto el ancho como el alto del elemento en un 50%, manteniendo la proporción original.

Escalado no uniforme

Si necesitamos escalar un elemento de forma diferente en cada eje, podemos proporcionar dos valores:

.distorted-element {
  width: 200px;
  height: 150px;
  background-color: #e74c3c;
  transform: scale(1.5, 0.8); /* 150% de ancho, 80% de alto */
}

En este ejemplo, el elemento se estirará horizontalmente y se comprimirá verticalmente, alterando su proporción original.

Escalado horizontal con scaleX()

Para escalar un elemento solo horizontalmente, utilizamos la función scaleX():

.horizontal-stretch {
  width: 200px;
  height: 150px;
  background-color: #2ecc71;
  transform: scaleX(1.5); /* Estira horizontalmente al 150% */
}

Este código aumentará el ancho del elemento en un 50% sin afectar su altura.

Escalado vertical con scaleY()

De manera similar, para escalar solo verticalmente, usamos scaleY():

.vertical-stretch {
  width: 200px;
  height: 150px;
  background-color: #f1c40f;
  transform: scaleY(1.5); /* Estira verticalmente al 150% */
}

Punto de origen del escalado

Por defecto, el punto de origen para la transformación de escalado es el centro del elemento (50% 50%). Esto significa que el elemento crece o se reduce desde su centro. Podemos cambiar este comportamiento con la propiedad transform-origin:

.corner-scale {
  width: 100px;
  height: 100px;
  background-color: #9b59b6;
  transform-origin: top left; /* Origen en la esquina superior izquierda */
  transform: scale(1.5);
}

En este ejemplo, el elemento se escalará desde su esquina superior izquierda en lugar de desde su centro.

La propiedad transform-origin puede tomar valores como:

• Palabras clave: top, bottom, left, right, center
• Porcentajes: 0% 0% (esquina superior izquierda), 100% 100% (esquina inferior derecha)
• Unidades de longitud: 20px 30px

Escalado negativo (efecto espejo)

Una característica interesante de scale() es que acepta valores negativos, lo que produce un efecto espejo:

.mirror-horizontal {
  transform: scaleX(-1); /* Reflejo horizontal */
}

.mirror-vertical {
  transform: scaleY(-1); /* Reflejo vertical */
}

.mirror-both {
  transform: scale(-1, -1); /* Reflejo en ambos ejes */
}

El escalado negativo es útil para crear efectos de reflejo o para voltear iconos y elementos gráficos sin necesidad de imágenes adicionales.

Manteniendo la proporción

Cuando trabajamos con imágenes u otros elementos donde la proporción es importante, debemos ser cuidadosos al aplicar escalados. Para mantener la proporción (también conocida como relación de aspecto), debemos usar el mismo factor de escala en ambos ejes:

.image-zoom {
  transform: scale(1.2); /* Mantiene la proporción */
}

/* Alternativa equivalente */
.image-zoom-alt {
  transform: scale(1.2, 1.2); /* Explícitamente igual en ambos ejes */
}

Ejemplo práctico: Efecto de zoom al hover

Un uso común del escalado es crear efectos de zoom cuando el usuario pasa el cursor sobre un elemento:

.card {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover img {
  transform: scale(1.1); /* Zoom al 110% al pasar el cursor */
}

Este código crea un efecto suave de zoom en la imagen cuando el usuario pasa el cursor sobre la tarjeta, manteniendo la imagen dentro de los límites del contenedor gracias a overflow: hidden.

Combinando scale con otras transformaciones

Podemos combinar scale() con otras transformaciones como translate() para crear efectos más complejos:

.combined-transform {
  transform: translate(20px, 10px) scale(1.2);
}

Es importante tener en cuenta que el orden de las transformaciones importa. Las transformaciones se aplican de derecha a izquierda, por lo que en el ejemplo anterior, primero se escala el elemento y luego se traslada.

Escalado y rendimiento

Al igual que con translate(), usar scale() tiene ventajas de rendimiento sobre cambiar directamente width y height:

/* Menos eficiente - causa reflow */
.resize-inefficient {
  width: 200px;
  height: 150px;
}
.resize-inefficient:hover {
  width: 240px;  /* 120% del original */
  height: 180px; /* 120% del original */
}

/* Más eficiente - usa la GPU */
.resize-efficient {
  width: 200px;
  height: 150px;
}
.resize-efficient:hover {
  transform: scale(1.2); /* 120% del tamaño original */
}

El segundo enfoque es más eficiente porque:

1. No provoca un recálculo completo del diseño (reflow)
2. La transformación es procesada por la GPU
3. Mantiene automáticamente la proporción del elemento

Ejemplo: Botón con efecto de pulsación

Podemos usar scale() para crear un efecto de "pulsación" en botones:

.pulse-button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.pulse-button:active {
  transform: scale(0.95); /* Se reduce ligeramente al hacer clic */
}

Este efecto da una retroalimentación visual al usuario cuando hace clic en el botón, simulando una pulsación física.

Consideraciones importantes

Al trabajar con scale(), debemos tener en cuenta algunas consideraciones:

• El escalado puede hacer que el texto se vea borroso si se aplican factores que no son enteros
• Los elementos escalados pueden superponerse a otros elementos, ya que el espacio que ocupan en el flujo del documento no cambia
• Para controlar el desbordamiento de elementos escalados, podemos usar overflow: hidden en el contenedor

.container {
  position: relative;
  overflow: hidden; /* Controla el desbordamiento */
}

.scalable-element {
  transition: transform 0.3s ease;
}

.container:hover .scalable-element {
  transform: scale(1.2);
}

El escalado es una herramienta poderosa que, cuando se usa correctamente, puede mejorar significativamente la interactividad y el atractivo visual de nuestros sitios web sin comprometer el rendimiento.

Rotación con rotate() y unidades de ángulo

La rotación es una transformación 2D que permite girar elementos HTML alrededor de un punto específico. A diferencia del desplazamiento o el escalado, la rotación cambia la orientación del elemento sin alterar su tamaño ni su posición en el flujo del documento.

La función rotate() nos permite especificar un ángulo de rotación para nuestros elementos, creando efectos visuales interesantes y dinámicos en nuestras páginas web.

Sintaxis básica de rotate()

La sintaxis para aplicar una rotación es sencilla:

.elemento {
  transform: rotate(ángulo);
}

Donde el ángulo determina cuánto girará el elemento desde su posición original.

Unidades de ángulo en CSS

CSS ofrece varias unidades de ángulo para especificar la rotación:

• Grados (deg): La unidad más común, donde 360deg representa una vuelta completa.
• Radianes (rad): Unidad matemática donde 2π radianes (aproximadamente 6.28rad) equivale a una vuelta completa.
• Gradianes (grad): Donde 400grad representa una vuelta completa.
• Vueltas (turn): Donde 1turn equivale exactamente a una vuelta completa (360 grados).

.rotate-degrees {
  transform: rotate(45deg);  /* Rotación de 45 grados */
}

.rotate-radians {
  transform: rotate(1.57rad); /* Aproximadamente 90 grados */
}

.rotate-gradians {
  transform: rotate(100grad); /* Un cuarto de vuelta */
}

.rotate-turns {
  transform: rotate(0.25turn); /* Un cuarto de vuelta */
}

La unidad más utilizada en la práctica es deg (grados) por su familiaridad y facilidad de uso.

Dirección de la rotación

La dirección de la rotación sigue una convención específica:

• Valores positivos: Rotación en sentido horario
• Valores negativos: Rotación en sentido antihorario

.rotate-clockwise {
  transform: rotate(45deg);  /* 45 grados en sentido horario */
}

.rotate-counterclockwise {
  transform: rotate(-45deg); /* 45 grados en sentido antihorario */
}

Punto de origen de la rotación

Por defecto, los elementos rotan alrededor de su centro (punto definido como 50% 50%). Podemos cambiar este punto de origen utilizando la propiedad transform-origin:

.corner-rotate {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform-origin: top left; /* Origen en la esquina superior izquierda */
  transform: rotate(45deg);
}

La propiedad transform-origin puede recibir:

• Palabras clave: top, bottom, left, right, center
• Valores en porcentaje: 0% 0% (esquina superior izquierda), 100% 100% (esquina inferior derecha)
• Unidades de longitud: 20px 30px

Ejemplo práctico: Crear un indicador giratorio

Podemos crear un indicador de carga simple utilizando rotación:

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Este código crea un círculo con un borde superior de color diferente que gira continuamente, simulando un indicador de carga.

Rotación de imágenes y texto

La rotación funciona con todo tipo de elementos, incluyendo imágenes y texto:

.tilted-image {
  transform: rotate(5deg);
}

.vertical-text {
  transform: rotate(90deg);
}

.upside-down {
  transform: rotate(180deg);
}

Para texto vertical, una alternativa más accesible es usar la propiedad writing-mode:

.vertical-text-accessible {
  writing-mode: vertical-rl;
}

Efecto de inclinación con hover

Un uso común de la rotación es crear efectos interactivos cuando el usuario pasa el cursor sobre un elemento:

.card {
  width: 200px;
  height: 300px;
  background-color: #ecf0f1;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: rotate(5deg); /* Ligera inclinación al pasar el cursor */
}

Este efecto da una sensación de interactividad y profundidad a elementos como tarjetas o imágenes.

Combinando rotate con otras transformaciones

Podemos combinar rotate() con otras transformaciones como translate() y scale():

.combined-transform {
  transform: translate(20px, 10px) rotate(45deg) scale(1.2);
}

Recuerda que el orden importa: las transformaciones se aplican de derecha a izquierda. En el ejemplo anterior, primero se escala el elemento, luego se rota y finalmente se traslada.

Rotación en 3D con rotateX, rotateY y rotateZ

Aunque estamos enfocados en transformaciones 2D, es útil conocer que CSS también ofrece rotaciones en el espacio tridimensional:

.rotate-3d {
  transform: rotateX(45deg); /* Rotación en el eje X */
}

.rotate-3d-y {
  transform: rotateY(45deg); /* Rotación en el eje Y */
}

.rotate-3d-z {
  transform: rotateZ(45deg); /* Equivalente a rotate(45deg) */
}

La función rotateZ() es equivalente a rotate() en el contexto 2D, ya que rota el elemento alrededor del eje Z (perpendicular a la pantalla).

Ejemplo: Crear un efecto de volteo de tarjeta

Podemos crear un efecto de volteo de tarjeta combinando rotaciones:

.card-container {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* Añade perspectiva para efecto 3D */
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

Este código crea una tarjeta que se voltea al pasar el cursor, mostrando su parte trasera.

Consideraciones de rendimiento

Al igual que con otras transformaciones, rotate() tiene ventajas de rendimiento:

• Las rotaciones son procesadas por la GPU
• No provocan un recálculo del diseño (reflow)
• Son más eficientes que otras técnicas para lograr efectos similares

Ejemplo: Crear un selector circular

Podemos usar rotaciones para crear un selector circular de opciones:

.selector {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ecf0f1;
}

.option {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #3498db;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
}

.option:nth-child(1) {
  transform: translate(0, -80px); /* Opción superior */
}

.option:nth-child(2) {
  transform: rotate(72deg) translate(0, -80px); /* 72 grados = 360/5 */
}

.option:nth-child(3) {
  transform: rotate(144deg) translate(0, -80px);
}

.option:nth-child(4) {
  transform: rotate(216deg) translate(0, -80px);
}

.option:nth-child(5) {
  transform: rotate(288deg) translate(0, -80px);
}

Este código crea un selector circular con cinco opciones distribuidas uniformemente.

Compatibilidad con navegadores

La función rotate() tiene excelente soporte en navegadores modernos. Para proyectos que requieran compatibilidad con navegadores muy antiguos, podemos usar prefijos de proveedor:

.elemento {
  -webkit-transform: rotate(45deg); /* Safari, Chrome antiguos */
  -moz-transform: rotate(45deg);    /* Firefox antiguo */
  -ms-transform: rotate(45deg);     /* IE */
  transform: rotate(45deg);         /* Estándar */
}

En la práctica actual, estos prefijos rara vez son necesarios, pero es bueno conocerlos para proyectos con requisitos específicos de compatibilidad.

Conversión entre unidades de ángulo

A veces necesitamos convertir entre diferentes unidades de ángulo. Estas son las equivalencias:

• 360 grados (deg) = 2π radianes (rad) ≈ 6.28rad
• 360 grados (deg) = 400 gradianes (grad)
• 360 grados (deg) = 1 vuelta (turn)

/* Todas estas rotaciones son equivalentes (90 grados) */
.rotate-90 {
  transform: rotate(90deg);
}

.rotate-quarter {
  transform: rotate(0.25turn);
}

.rotate-pi-half {
  transform: rotate(1.57rad);
}

.rotate-100grad {
  transform: rotate(100grad);
}

La rotación es una herramienta versátil que, combinada con otras transformaciones y efectos CSS, nos permite crear interfaces dinámicas e interactivas sin necesidad de JavaScript.

Sesgado con skew(X/Y) y deformación visual

El sesgado o inclinación es una transformación 2D que permite distorsionar elementos HTML a lo largo de los ejes X e Y. A diferencia de la rotación que gira todo el elemento, el sesgado mantiene paralelos los lados opuestos mientras inclina los otros, creando una deformación visual similar a un paralelogramo.

La función skew() nos permite aplicar esta distorsión controlada, añadiendo dinamismo y perspectiva a nuestros diseños web sin alterar el flujo del documento.

Sintaxis básica del sesgado

Podemos aplicar el sesgado de varias formas:

.elemento {
  transform: skew(ánguloX, ánguloY);  /* Sesgado en ambos ejes */
  transform: skewX(ángulo);           /* Solo sesgado horizontal */
  transform: skewY(ángulo);           /* Solo sesgado vertical */
}

Donde los ángulos determinan el grado de inclinación en cada eje. Si solo se proporciona un valor a skew(), se aplica únicamente al eje X.

Unidades de ángulo para skew

Al igual que con rotate(), podemos usar diferentes unidades de ángulo:

.skew-degrees {
  transform: skew(20deg);       /* Usando grados */
}

.skew-radians {
  transform: skew(0.35rad);     /* Usando radianes */
}

.skew-gradians {
  transform: skew(22grad);      /* Usando gradianes */
}

.skew-turns {
  transform: skew(0.055turn);   /* Usando vueltas */
}

La unidad más común es deg (grados) por su facilidad de comprensión y uso.

Sesgado horizontal con skewX()

La función skewX() inclina el elemento a lo largo del eje X, creando una deformación horizontal:

.horizontal-skew {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  transform: skewX(20deg);
}

Este código inclina el elemento hacia la derecha, manteniendo paralelos los bordes superior e inferior mientras los laterales se inclinan.

Un valor positivo inclina el elemento hacia la izquierda en la parte superior, mientras que un valor negativo lo inclina hacia la derecha:

.skew-left {
  transform: skewX(20deg);  /* Inclinación hacia la izquierda */
}

.skew-right {
  transform: skewX(-20deg); /* Inclinación hacia la derecha */
}

Sesgado vertical con skewY()

De manera similar, skewY() inclina el elemento a lo largo del eje Y:

.vertical-skew {
  width: 200px;
  height: 100px;
  background-color: #2ecc71;
  transform: skewY(15deg);
}

En este caso, los bordes laterales permanecen paralelos mientras los bordes superior e inferior se inclinan.

Un valor positivo inclina el elemento hacia la derecha en la parte superior, mientras que un valor negativo lo inclina hacia la izquierda:

.skew-right-top {
  transform: skewY(15deg);  /* Inclinación hacia la derecha */
}

.skew-left-top {
  transform: skewY(-15deg); /* Inclinación hacia la izquierda */
}

Sesgado en ambos ejes

Para aplicar sesgado en ambos ejes simultáneamente, usamos la función skew() con dos valores:

.diagonal-skew {
  width: 200px;
  height: 150px;
  background-color: #e74c3c;
  transform: skew(20deg, 10deg);
}

Este código crea una deformación diagonal, inclinando el elemento tanto horizontal como verticalmente.

Punto de origen del sesgado

Al igual que con otras transformaciones, el punto de origen para el sesgado es el centro del elemento por defecto. Podemos modificarlo con la propiedad transform-origin:

.corner-skew {
  width: 150px;
  height: 100px;
  background-color: #9b59b6;
  transform-origin: bottom left; /* Origen en la esquina inferior izquierda */
  transform: skew(30deg);
}

Cambiar el punto de origen afecta significativamente el resultado visual del sesgado, ya que la deformación se calcula a partir de ese punto.

Efectos visuales con skew

El sesgado es particularmente útil para crear efectos visuales interesantes:

Efecto de perspectiva

.perspective-button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  transform: skewX(-10deg);
}

.perspective-button span {
  display: inline-block;
  transform: skewX(10deg); /* Contrarresta el sesgado para el texto */
}

Este código crea un botón con efecto de perspectiva, pero mantiene el texto legible al contrarrestar el sesgado.

Efecto de cinta o banner

.ribbon {
  position: relative;
  background-color: #e74c3c;
  color: white;
  padding: 10px 30px;
  transform: skewY(-5deg);
}

Este estilo crea un efecto de cinta o banner inclinado, ideal para destacar ofertas o anuncios.

Ejemplo práctico: Tarjetas con efecto paralax

Podemos crear un efecto de paralaje simple con tarjetas sesgadas:

.card-container {
  perspective: 800px;
}

.card {
  width: 250px;
  height: 350px;
  background-color: #ecf0f1;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: skewY(5deg) translateZ(20px);
}

Este código crea un efecto 3D sutil cuando el usuario pasa el cursor sobre la tarjeta.

Combinando skew con otras transformaciones

El sesgado se puede combinar con otras transformaciones para crear efectos más complejos:

.combined-transform {
  transform: translate(20px, 10px) skew(15deg) rotate(10deg);
}

Recuerda que el orden importa: las transformaciones se aplican de derecha a izquierda. En el ejemplo, primero se rota el elemento, luego se sesga y finalmente se traslada.

Limitaciones y consideraciones

El sesgado tiene algunas limitaciones que debemos tener en cuenta:

• Distorsión de texto: El texto dentro de elementos sesgados puede volverse difícil de leer. Una solución es aplicar un sesgado inverso al texto:

.skewed-container {
  transform: skewX(-15deg);
}

.skewed-container .content {
  transform: skewX(15deg); /* Contrarresta el sesgado para mejorar legibilidad */
}

• Ángulos extremos: Los ángulos muy pronunciados pueden causar distorsiones excesivas o incluso hacer que el elemento desaparezca visualmente. Es recomendable mantener los ángulos moderados (generalmente entre -45° y 45°).

• Comportamiento con imágenes: Las imágenes dentro de elementos sesgados también se distorsionan, lo que puede ser indeseable. Para evitarlo, podemos aplicar el sesgado solo al contenedor:

.image-container {
  transform: skewX(-10deg);
  overflow: hidden;
}

.image-container img {
  transform: skewX(10deg); /* Contrarresta el sesgado */
  max-width: 120%; /* Compensación para cubrir los bordes */
  margin: -5%; /* Ajuste para centrar la imagen */
}

Ejemplo: Menú con efecto de sesgado

Podemos crear un menú de navegación con efecto de sesgado para darle un aspecto dinámico:

.nav-menu {
  display: flex;
  list-style: none;
  padding: 0;
}

.nav-item {
  margin-right: 5px;
}

.nav-link {
  display: block;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  transform: skewX(-15deg);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.nav-link span {
  display: block;
  transform: skewX(15deg); /* Contrarresta el sesgado para el texto */
}

.nav-link:hover {
  background-color: #2980b9;
  transform: skewX(-15deg) translateY(-5px);
}

Este código crea un menú con pestañas sesgadas que se elevan ligeramente al pasar el cursor.

Creando formas con skew

El sesgado nos permite crear formas geométricas interesantes sin necesidad de imágenes:

Paralelogramo

.parallelogram {
  width: 150px;
  height: 100px;
  background-color: #f1c40f;
  transform: skewX(20deg);
}

Rombo

.diamond {
  width: 100px;
  height: 100px;
  background-color: #1abc9c;
  transform: rotate(45deg) skew(15deg, 15deg);
}

Efecto de texto 3D con sesgado

Podemos crear un efecto de texto 3D combinando sesgado con otras técnicas:

.text-3d {
  font-size: 36px;
  font-weight: bold;
  color: #3498db;
  text-shadow: 
    1px 1px 0 #2980b9,
    2px 2px 0 #2980b9,
    3px 3px 0 #2980b9;
  transform: skewY(-5deg);
}

Este código crea un efecto de texto tridimensional con una ligera inclinación.

Compatibilidad con navegadores

La función skew() tiene buen soporte en navegadores modernos. Para proyectos que requieran compatibilidad con navegadores antiguos, podemos usar prefijos de proveedor:

.elemento {
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -ms-transform: skew(20deg);
  transform: skew(20deg);
}

Ejemplo: Diseño de revista con elementos sesgados

Podemos crear un diseño tipo revista utilizando elementos sesgados para dar dinamismo:

.magazine-layout {
  position: relative;
}

.headline {
  font-size: 32px;
  font-weight: bold;
  transform: skewY(-5deg);
  margin-bottom: 30px;
}

.feature-image {
  transform: skewX(-10deg);
  overflow: hidden;
  margin: 20px 0;
}

.feature-image img {
  transform: skewX(10deg);
  max-width: 110%;
  margin-left: -5%;
}

.pull-quote {
  width: 200px;
  padding: 20px;
  background-color: #f8f9fa;
  float: right;
  margin: 0 0 20px 20px;
  transform: skewY(3deg);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

Este código crea un diseño de revista con elementos sesgados que aportan dinamismo visual a la página.

El sesgado es una herramienta poderosa que, cuando se usa con moderación y propósito, puede transformar diseños planos en composiciones dinámicas y visualmente interesantes. La clave está en encontrar el equilibrio entre la deformación visual y la usabilidad, especialmente cuando se trata de contenido textual.