CSS
HTML
COMPONENTS
CODE HUB
Generador de Sesgado CSS
Configuración
Rotar X
Rotar Y
Clase
Vista previa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget cursus felis. Duis sed accumsan tellus, eget cursus nisl.
Código
Aprende a programar con Lara
Domina los conceptos de programación paso a paso con tu tutora de IA interactiva. Lara explica lógicas complejas, revisa tus ejercicios prácticos y te ayuda a construir una base sólida en el desarrollo de software.
Lecciones de programación interactivas adaptadas a tu propio ritmo.
Empezar a aprender con LaraGenerador de Sesgado CSS
En CSS, la transformación de sesgado se usa para distorsionar un elemento HTML inclinándolo a lo largo de uno o más ejes, creando una apariencia sesgada o inclinada. Hay dos tipos principales de transformaciones de sesgado: skewX y skewY. Estas transformaciones permiten especificar el ángulo de sesgado para los ejes horizontal y vertical, respectivamente.
Aquí está cómo usar las transformaciones de sesgado como parte de la propiedad transform:
Rotación 2D:
Sesgado Horizontal (skewX): Para aplicar un sesgado horizontal a un elemento, usas la función skewX. Toma un valor de ángulo como argumento para especificar el grado de sesgado a lo largo del eje X.
.rotate-element {
transform: rotate(45deg);
}
En este ejemplo, la clase .skew-x-element sesga el elemento 30 grados a lo largo del eje X.
Sesgado Vertical (skewY):
Para sesgar verticalmente, usas la función skewY. Permite especificar el grado de sesgado a lo largo del eje Y.
.rotate-3d-element {
transform: rotateX(45deg);
}
En este caso, la clase .skew-y-element sesga el elemento 45 grados a lo largo del eje Y.
Sesgado Combinado (tanto skewX como skewY):
También puedes combinar tanto las transformaciones de sesgado horizontal como vertical usando la función skew. Toma dos valores de ángulo como argumentos, uno para el sesgado horizontal y otro para el sesgado vertical.
.custom-transform-element {
transform: translateX(50px) rotate(30deg) scale(1.5);
}
En este ejemplo, la clase .combined-skew-element combina un sesgado horizontal de 20 grados y un sesgado vertical de 15 grados.
Las transformaciones de sesgado se utilizan a menudo para crear efectos visuales, texto inclinado y elementos de diseño que añaden profundidad y perspectiva a los diseños de páginas web. Puedes usarlas en combinación con otras transformaciones como rotación, escalado y traslación para lograr efectos visuales más complejos.