55 - Transformaciones 2D 🔄 en CSS

---

55 - Transformaciones 2D: Dale vida a tus elementos 🎨

Las transformaciones 2D permiten mover, rotar, escalar o inclinar los elementos en tu página web, creando efectos dinámicos y visuales.

• 1. Transformaciones 2D
• 2. Funciones de transformación 2D
• 3. La función matrix()
• 4. La función translate()
• 5. La función translateX()
• 6. La función translateY()
• 7. La función scale()
• 8. La función scaleX()
• 9. La función scaleY()
• 10. La función rotate()
• 11. La función skew()
• 12. La función skewX()
• 13. La función skewY()
• 14. Tablas: Propiedades y Funciones

---

1. Transformaciones 2D

Las transformaciones 2D permiten manipular elementos a nivel visual mediante rotaciones, traslaciones, escalas o sesgos. Se usan principalmente con la propiedad transform en CSS.

Pasa el ratón: Rotación con rotate(10deg)

/* Ejemplo: rotación al pasar el ratón */
.demo-rotate-10 {
  width: 100px;
  height: 100px;
  background-color: #ff6666;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transition: transform .35s ease, box-shadow .35s ease;
}
.demo-rotate-10:hover {
  transform: rotate(10deg);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}

---

2. Funciones de Transformación 2D

CSS 2D ofrece varias funciones para transformar elementos: matrix(), translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skew(), skewX(), skewY().

---

3. La función matrix()

matrix(a,b,c,d,e,f) combina en un solo conjunto la traslación, escala, rotación y sesgo. Aquí usamos la identidad con e y f para desplazar.

Pasa el ratón: Desplazamiento con matrix(1,0,0,1,20,20)

/* Ejemplo: mover usando matrix() al hover */
.demo-matrix-move {
  width: 100px;
  height: 100px;
  background-color: #66ccff;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transition: transform .35s ease, box-shadow .35s ease;
}
.demo-matrix-move:hover {
  transform: matrix(1, 0, 0, 1, 20, 20); /* traslación (20px, 20px) */
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}

---

4. La función translate()

translate(x, y) mueve el elemento a lo largo del eje X e Y.

Pasa el ratón: Desplazamiento con translate(50px,30px)

/* Ejemplo: translate() al hover */
.demo-translate {
  width: 100px;
  height: 100px;
  background-color: #ffcc66;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transition: transform .35s ease, box-shadow .35s ease;
}
.demo-translate:hover {
  transform: translate(50px, 30px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}

---

5. La función translateX()

translateX(x) mueve el elemento solo a lo largo del eje X.

Pasa el ratón por encima del cuadro 💡

div {
  width: 100px;
  height: 100px;
  background-color: #66ff66;
  transition: transform 0.5s;
}
div:hover {
  transform: translateX(50px);
}

---

6. La función translateY()

translateY(y) mueve el elemento solo a lo largo del eje Y.

Pasa el ratón por encima del cuadro 💡

div {
  width: 100px;
  height: 100px;
  background-color: #ff66cc;
  transition: transform 0.5s;
}
div:hover {
  transform: translateY(50px);
}

---

7. La función scale()

scale(x, y) permite escalar un elemento en ancho (X) y alto (Y) proporcionalmente.

Pasa el ratón por encima del cuadro 💡

div {
  width: 100px;
  height: 100px;
  background-color: #6699ff;
  transition: transform 0.5s;
}
div:hover {
  transform: scale(1.5,1.2);
}

---

8. La función scaleX()

scaleX(x) escala un elemento solo en el eje horizontal. Pasa el ratón sobre el cuadro 👇

Ejemplo: Escalado horizontal con scaleX()

.box-scalex {
  width: 100px;
  height: 100px;
  background-color: #ff9966;
  transition: transform 0.5s;
}
.box-scalex:hover {
  transform: scaleX(2);
}

---

9. La función scaleY()

scaleY(y) escala un elemento solo en el eje vertical. Pasa el ratón sobre el cuadro 👇

Ejemplo: Escalado vertical con scaleY()

.box-scaley {
  width: 100px;
  height: 100px;
  background-color: #66cc99;
  transition: transform 0.5s;
}
.box-scaley:hover {
  transform: scaleY(1.8);
}

---

10. La función rotate()

rotate(angle) rota un elemento según el ángulo especificado. Pasa el ratón sobre el cuadro 👇

Ejemplo: Rotación con rotate()

.box-rotate {
  width: 100px;
  height: 100px;
  background-color: #cc66ff;
  transition: transform 0.5s;
}
.box-rotate:hover {
  transform: rotate(45deg);
}

---

11. La función skew()

skew(x-angle, y-angle) inclina un elemento a lo largo de los ejes X y Y.

Pasa el ratón para ver el efecto

---

12. La función skewX()

skewX(angle) inclina un elemento solo a lo largo del eje X.

Pasa el ratón para ver el efecto

---

13. La función skewY()

skewY(angle) inclina un elemento solo a lo largo del eje Y.

Pasa el ratón para ver el efecto

---

14. Tablas: Propiedades y Funciones

Propiedades de transformación 2D:

Property	Description
transform	Applies a 2D or 3D transformation to an element
transform-origin	Allows you to change the position on transformed elements

Funciones de Transformación CSS 2D:

Function	Description
matrix()	Defines a 2D transformation, using a matrix of six values
translate()	Defines a 2D translation, moving the element along the X- and the Y-axis
translateX()	Defines a 2D translation, moving the element along the X-axis
translateY()	Defines a 2D translation, moving the element along the Y-axis
scale()	Defines a 2D scale transformation, scaling the elements width and height
scaleX()	Defines a 2D scale transformation, scaling the element's width
scaleY()	Defines a 2D scale transformation, scaling the element's height
rotate()	Defines a 2D rotation, the angle is specified in the parameter
skew()	Defines a 2D skew transformation along the X- and the Y-axis
skewX()	Defines a 2D skew transformation along the X-axis
skewY()	Defines a 2D skew transformation along the Y-axis

---

Ir al índice