CSS
Tutorial CSS: Transformaciones 2D
Aprende las transformaciones 2D en CSS para desplazar, escalar, rotar y sesgar elementos con ejemplos prácticos y técnicas avanzadas.
Aprende CSS y certifícateDesplazamiento 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 horizontaly
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:
top: 50%
yleft: 50%
posicionan la esquina superior izquierda del elemento en el centro del contenedortranslate(-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:
- No provoca un recálculo completo del diseño (reflow)
- La transformación es procesada por la GPU
- 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.
Ejercicios de esta lección Transformaciones 2D
Evalúa tus conocimientos de esta lección Transformaciones 2D con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender y aplicar la función translate() para desplazar elementos en el plano 2D.
- Utilizar scale() para escalar elementos manteniendo o modificando sus proporciones.
- Aplicar rotate() para rotar elementos con diferentes unidades de ángulo y puntos de origen.
- Implementar skew() para sesgar elementos y crear deformaciones visuales.
- Combinar transformaciones y optimizar su rendimiento en navegadores modernos.