Transformaciones Skew y Matrix
Cree distorsiones diagonales con skew() y aplique matrices de transformación completas con matrix().
Transformaciones Skew y Matrix es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Transformación skew()
skew() inclina un elemento a lo largo de uno o ambos ejes, creando una distorsión inclinada o similar a la cursiva en elementos de bloque.
<div class="diagonal-section">Section</div>
<span class="italic-badge">Badge</span>skewX() y skewY()
Aplique el sesgo de forma independiente en cada eje:
<div class="banner">Slanted background</div>Contrarrestar el skew en los elementos secundarios
Cuando se aplica skew a un contenedor, sus elementos secundarios también se inclinan. Aplique el skew inverso a los elementos secundarios para mantenerlos verticales:
<div class="container"><p>Child text stays upright</p></div>Transformación matrix()
La función matrix(a, b, c, d, tx, ty) es la representación matemática subyacente de las transformaciones 2D. Combina translate, rotate, scale y skew en una sola operación matricial.
<div class="element">Matrix transform</div>matrix3d() para 3D
matrix3d() amplía la transformación a 16 valores para controlar por completo las transformaciones afines 3D. JavaScript suele generarla para efectos 3D complejos.
Skew práctico: sección diagonal
Un patrón de diseño popular: fondos de sección inclinados:
<div class="section-diagonal"><p>Diagonal background section</p></div>Skew para elementos decorativos de la interfaz
Skew crea un interés visual dinámico en insignias, cintas decorativas y texto resaltado:
<span class="badge"><span>NEW</span></span>Perspectiva para un contexto 3D
Las transformaciones 3D requieren un contexto de perspectiva en el elemento principal. perspective establece la distancia entre el observador y el plano z=0.
<div class="scene"><div class="card">Card</div></div>Orden de las funciones de transformación
El orden de las funciones de transformación en una declaración combinada es importante. rotate then translate produce un resultado distinto de translate then rotate:
<div class="scene-row">
<span class="order-rotate-first">A</span>
<span class="order-translate-first">B</span>
</div>Animar el skew
skew puede incluirse en una transición para crear efectos de controles deslizantes y de volteo de tarjetas. Combínelo con otras transformaciones para lograr un movimiento orgánico:
<div class="card demo-active">Card</div>Comprobación rápida
Se ha aplicado transform: skewX(-15deg) a un elemento. ¿Qué ocurre con sus elementos de texto secundarios?
Repaso
skewX/Y() crea distorsiones inclinadas para separaciones decorativas entre secciones y elementos dinámicos de la interfaz. Aplique el skew inverso a los elementos secundarios para mantener su contenido vertical. matrix() es la base matemática que combina todas las transformaciones 2D. El orden de las funciones de transformación encadenadas afecta significativamente al resultado final.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Transformaciones Skew y Matrix» es gratis?
Sí — el texto completo de «Transformaciones Skew y Matrix» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Transformaciones Skew y Matrix»?
Cree distorsiones diagonales con skew() y aplique matrices de transformación completas con matrix(). Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Transformaciones Skew y Matrix»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Translate, Rotate y Scale
- Transformaciones Skew y Matrix
- Origen y perspectiva de las transformaciones
- Transformaciones 3D: rotateX, rotateY y translateZ