El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Les transformacions de CSS permeten modificar l'aparença d'un element canviant la seva forma, mida i posició. Aquestes transformacions es poden aplicar utilitzant la propietat transform. En aquest tema, explorarem les diferents funcions de transformació disponibles i com utilitzar-les per crear efectes visuals dinàmics.

Funcions de Transformació

Les funcions de transformació més comunes són:

translate(): Mou un element d'una posició a una altra.
rotate(): Rota un element al voltant d'un punt fix.
scale(): Canvia la mida d'un element.
skew(): Inclina un element en una direcció específica.
matrix(): Aplica una transformació combinada utilitzant una matriu.

translate()

La funció translate() desplaça un element en l'eix X i/o Y.

.element {
  transform: translate(50px, 100px);
}

En aquest exemple, l'element es mou 50 píxels a la dreta i 100 píxels cap avall.

rotate()

La funció rotate() gira un element al voltant del seu punt central.

.element {
  transform: rotate(45deg);
}

Aquest codi gira l'element 45 graus en sentit horari.

scale()

La funció scale() canvia la mida d'un element en l'eix X i/o Y.

.element {
  transform: scale(1.5, 2);
}

Aquest exemple augmenta l'amplada de l'element en un 150% i l'alçada en un 200%.

skew()

La funció skew() inclina un element en l'eix X i/o Y.

.element {
  transform: skew(30deg, 20deg);
}

Aquest codi inclina l'element 30 graus en l'eix X i 20 graus en l'eix Y.

matrix()

La funció matrix() aplica una transformació combinada utilitzant una matriu de sis valors.

.element {
  transform: matrix(1, 0.5, -0.5, 1, 0, 0);
}

Aquest exemple aplica una combinació de translació, rotació, escalat i inclinació a l'element.

Combinació de Transformacions

És possible combinar múltiples transformacions en una sola propietat transform separant-les amb espais.

.element {
  transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}

En aquest exemple, l'element es mou 50 píxels a la dreta i 100 píxels cap avall, es gira 45 graus i es redimensiona en un 150%.

Punt d'Ancoratge

El punt d'ancoratge (o punt de transformació) és el punt al voltant del qual es realitzen les transformacions. Per defecte, aquest punt és el centre de l'element, però es pot canviar utilitzant la propietat transform-origin.

.element {
  transform-origin: top left;
  transform: rotate(45deg);
}

En aquest exemple, l'element es gira 45 graus al voltant del seu vèrtex superior esquerre.

Exercicis Pràctics

Exercici 1: Mou un Element

Mou un element 100 píxels a la dreta i 50 píxels cap avall.

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici 1: Mou un Element</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      transform: translate(100px, 50px);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Exercici 2: Gira un Element

Gira un element 90 graus en sentit horari.

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici 2: Gira un Element</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transform: rotate(90deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Exercici 3: Escala un Element

Escala un element al doble de la seva mida original.

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici 3: Escala un Element</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: green;
      transform: scale(2);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Resum

En aquesta secció, hem après sobre les diferents funcions de transformació de CSS, com translate(), rotate(), scale(), skew() i matrix(). També hem vist com combinar múltiples transformacions i com canviar el punt d'ancoratge utilitzant transform-origin. Finalment, hem practicat aquests conceptes amb alguns exercicis pràctics. Amb aquestes eines, pots començar a crear efectes visuals dinàmics i interessants per als teus projectes web.

Transformacions de CSS

Funcions de Transformació

translate()

rotate()

scale()

skew()

matrix()

Combinació de Transformacions

Punt d'Ancoratge

Exercicis Pràctics

Exercici 1: Mou un Element

Exercici 2: Gira un Element

Exercici 3: Escala un Element

Resum

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu