Apprends Transformations 2D et 3D

Fonctions de transformation 2D

La propriété transform te permet de déplacer, faire pivoter, redimensionner et incliner visuellement des éléments sans affecter la mise en page du document. L'espace original que l'élément occupe dans le flux reste inchangé.

translate() — Déplace un élément depuis sa position actuelle.

css

transform: translate(50px, 20px);   /* x, y */
transform: translateX(50px);         /* horizontal uniquement */
transform: translateY(-20px);        /* vertical uniquement */

rotate() — Fait pivoter un élément autour de son centre.

css

transform: rotate(45deg);    /* sens horaire */
transform: rotate(-15deg);   /* sens antihoraire */

scale() — Redimensionne un élément par rapport à son centre.

css

transform: scale(1.5);       /* 150% de la taille originale */
transform: scale(2, 0.5);    /* 2x la largeur, 0.5x la hauteur */
transform: scaleX(0.8);      /* 80% de largeur uniquement */

skew() — Incline un élément le long d'un ou des deux axes.

css

transform: skew(10deg, 5deg); /* inclinaison-x, inclinaison-y */
transform: skewX(15deg);       /* inclinaison horizontale */

Tu peux combiner plusieurs transformations dans une seule déclaration. Elles sont appliquées de droite à gauche :

css

transform: translate(50px, 0) rotate(45deg) scale(1.2);

Origine de transformation et combinaison de transformations

html

<style>
  .box {
    width: 100px;
    height: 100px;
    margin: 40px;
    display: inline-block;
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: 100px;
  }

  .translated {
    background: #6366f1;
    transform: translate(20px, 10px);
  }

  .rotated {
    background: #ec4899;
    transform: rotate(30deg);
    transform-origin: top left;
  }

  .scaled {
    background: #22c55e;
    transform: scale(1.3);
  }

  .combined {
    background: #f59e0b;
    transform: rotate(-10deg) scale(1.1) translateY(-5px);
    transform-origin: center center;
  }
</style>

<div class="box translated">Move</div>
<div class="box rotated">Spin</div>
<div class="box scaled">Grow</div>
<div class="box combined">Mix</div>

Transformations 3D

CSS supporte également les transformations 3D, ajoutant de la profondeur sur l'axe z.

perspective — Définit la distance entre le spectateur et le plan z=0. Des valeurs plus petites créent des effets 3D plus spectaculaires.

css

/* Sur le conteneur parent */
.scene {
  perspective: 600px;
}

/* Ou sur l'élément lui-même */
.card {
  transform: perspective(600px) rotateY(30deg);
}

Fonctions de rotation 3D :

css

transform: rotateX(45deg);  /* incline avant/arrière */
transform: rotateY(45deg);  /* tourne gauche/droite */
transform: rotateZ(45deg);  /* identique à rotate() */
transform: rotate3d(1, 1, 0, 45deg); /* axe personnalisé */

transform-style: preserve-3d — Par défaut, les éléments enfants sont aplatis dans le plan de leur parent. Pour permettre aux enfants d'exister dans l'espace 3D :

css

.scene {
  perspective: 800px;
}
.card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card:hover {
  transform: rotateY(180deg);
}
.card-front, .card-back {
  backface-visibility: hidden;
}

Ce modèle est la base de l'effet classique CSS de retournement de carte.

Transformations 2D et 3D

Fonctions de transformation 2D

Origine de transformation et combinaison de transformations

Transformations 3D

Prêt à pratiquer ?