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.

Ejemplo: Rotación simple de un cuadrado

div {
  width: 100px;
  height: 100px;
  background-color: #ff6666;
  transform: rotate(10deg);
  border-radius: 8px;
}

---

3. La función matrix()

La función matrix(a,b,c,d,e,f) define una transformación 2D usando seis valores que combinan traslación, escala, rotación y sesgo en un solo conjunto.

Ejemplo: Desplazamiento mediante matrix()

div {
  width: 100px;
  height: 100px;
  background-color: #66ccff;
  transform: matrix(1,0,0,1,20,20);
  border-radius: 8px;
}

---

4. La función translate()

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

Ejemplo: Desplazamiento simple con translate()

div {
  width: 100px;
  height: 100px;
  background-color: #ffcc66;
  transform: translate(50px,30px);
  border-radius: 8px;
}

---

5. La función translateX()

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

Ejemplo: Desplazamiento horizontal con translateX()

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

---

6. La función translateY()

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

Ejemplo: Desplazamiento vertical con translateY()

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

---

7. La función scale()

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

Ejemplo: Escalado con scale()

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

---

8. La función scaleX()

scaleX(x) escala un elemento solo en el eje horizontal.

Ejemplo: Escalado horizontal con scaleX()

div {
  width: 100px;
  height: 100px;
  background-color: #ff9966;
  transform: scaleX(2);
}

---

9. La función scaleY()

scaleY(y) escala un elemento solo en el eje vertical.

Ejemplo: Escalado vertical con scaleY()

div {
  width: 100px;
  height: 100px;
  background-color: #66cc99;
  transform: scaleY(1.8);
}

---

10. La función rotate()

rotate(angle) rota un elemento según el ángulo especificado (en grados, radianes o turns).

Ejemplo: Rotación con rotate()

div {
  width: 100px;
  height: 100px;
  background-color: #cc66ff;
  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.

Ejemplo: Sesgado con skew()

div {
  width: 100px;
  height: 100px;
  background-color: #ff6699;
  transform: skew(20deg,10deg);
}

---

12. La función skewX()

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

Ejemplo: Sesgado horizontal con skewX()

div {
  width: 100px;
  height: 100px;
  background-color: #66ffcc;
  transform: skewX(25deg);
}

---

13. La función skewY()

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

Ejemplo: Sesgado vertical con skewY()

div {
  width: 100px;
  height: 100px;
  background-color: #ffcc66;
  transform: skewY(25deg);
}

---

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