Les nouvelles technologies pour l’enseignement des mathématiques
Intégration des TICE dans l’enseignement des mathématiques

MathémaTICE, première revue en ligne destinée à promouvoir les TICE à travers l’enseignement des mathématiques.

Géométrie repérée sans programmation
CSS 3 peut aider en maths

CSS 3 permet de modéliser des transformations géométriques (en géométrie repérée) directement dans une page web.

Pour profiter au mieux des animations (dernier onglet de l’article), un clic droit sur l’icône HTML d’une animation, suivi de « ouvrir le lien dans une nouvelle fenêtre » donne une pleine fluidité dans les animations.

Article mis en ligne le 4 octobre 2023
dernière modification le 10 juin 2024

par Alain Busser, Aymeric Picaud

Dans l’article sur Python en lycée, l’un des auteurs s’est permis d’utiliser la concision de Python pour traiter des points du programme de lycée sur lesquels l’utilisation de Python n’est pas prévue : la géométrie repérée. Dans le programme de mathématiques du lycée mis en place en 2017, la géométrie repérée porte essentiellement sur le calcul de coordonnées (points, vecteurs) et les équations (de droites, de cercles). Mais les transformations géométriques sont intéressantes à traiter avec les coordonnées, ne serait-ce que parce qu’elles sont au programme du collège.

La géométrie repérée des transformations du plan peut être faite en Python qui est le langage de programmation au lycée (et pas qu’en maths), mais de fait, il n’est pas nécessaire d’utiliser de langage de programmation du tout : CSS3 suffit pour calculer des transformations parmi lesquelles les symétries axiales, les rotations (y compris la symétrie centrale) et les homothéties. Dans cet article, on présente un TD effectué en première NSI, portant sur ces transformations et leurs animations. Il s’agit donc de montrer des transformations au programme du collège avec la géométrie repérée. Un défi...

Licence Creative Commons
Cet article est mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 2.0 France.

Le langage CSS3 permet de modifier l’aspect d’une page web. Parmi ses nombreuses possibilités, il y a la taille et l’orientation des objets de la page, ce qui constitue une introduction possible aux transformations géométriques du plan (voire de l’espace). Pour voir l’effet de ces transformations, il est utile de les appliquer à un objet qui n’a pas trop de symétries. Par exemple un texte comme Tao.

html

Le style CSS s’appliquant à une page web au format html, on va commencer par montrer comment créer et afficher une page web :

  • pour la créer et la modifier, il faut un éditeur de texte (notepad ou sublime text sous Windows, simple text sous MacOS, vi ou Emacs sous Linux, VS Codium ou Geany sous toutes plateformes,...)
  • pour l’afficher, il faut un navigateur internet comme Edge, Chrome, Firefox etc.

De toute manière, on peut se passer de l’éditeur de texte, en se servant de sites web permettant d’écrire directement du html ou du Css dans la page. Par exemple https://jsFiddle.

Avec un navigateur Internet, un clic droit sur un élément de la page (un mot ou un paragraphe par exemple) permet de l’inspecter, par exemple de connaître ses dimensions, sa couleur etc.

On apprend alors que chaque élément html est inclus dans un rectangle. C’est à ce rectangle qu’on va appliquer l’une des transformations au programme du collège :

  • translation
  • symétrie axiale
  • rotation (en particulier symétrie centrale)
  • homothétie.

Texte

En Html, tous les éléments sont dans des balises, c’est-à-dire des éléments compris entre

  • une parenthèse ouvrante notée <balise>
  • et la parenthèse fermante qui lui correspond, notée </balise>

Pour écrire le mot Tao dans une page web, on peut le mettre dans un rectangle de classe p (un paragraphe), ou h2 (un titre de niveau 2) ou tout simplement div (un rectangle quelconque). Ici on choisira un h2, ce qui donne :

  1. <h2>Tao</h2>

corps

Cependant, pour que ce texte s’affiche dans le navigateur Internet, il faut le mettre, non pas dans l’entête head (qui ne s’affiche pas) mais dans le corps body (tout ce qui s’affiche dans la page). Il faut donc écrire

  1.     <h2>Tao</h2>
  2. </body>

Télécharger

Mais ce n’est pas tout : la totalité du code doit être dans une balise html ce qui donne, pour la page web, le code minimal

  1.     <body>
  2.         <h2>Tao</h2>
  3.     </body>
  4. </html>

Télécharger

Dans le navigateur, on obtient alors ceci :

entête

Le html ne comprend pas que le corps (body) mais également des choses à ne pas afficher, comme le code JavaScript, le choix du langage utilisé, le titre de la page... ou le CSS. Celui-ci est disposé dans une balise style, elle-même disposée dans l’entête head. Le code complet de la page sera alors

  1.     <head>
  2.         <style>
  3.  
  4.  
  5.  
  6.  
  7.         </style>
  8.     </head>
  9.     <body>
  10.         <h2>Tao</h2>
  11.     </body>
  12. </html>

Télécharger

Les lignes vides sont celles où on inscrira le code CSS (effets de style). Par exemple si on veut que tous les h2 soient écrits en bleu, on écrit

  1.     <head>
  2.         <style>
  3. h2 {color: blue; }
  4.         </style>
  5.     </head>
  6.     <body>
  7.         <h2>Tao</h2>
  8.     </body>
  9. </html>

Télécharger

ce qui produit cet effet dans le navigateur :

Dans la suite, on laissera les lettres en noir. Mais on leur appliquera des transformations du plan (la page web est un morceau de plan)

Repère

La page web est munie d’un repère, mais celui-ci n’est pas comme dans le cours de maths :

  • l’unité est, par défaut, le pixel noté px
  • l’axe des abscisses est bien horizontal et orienté vers la droite, mais l’axe des ordonnées est dirigé vers le bas
  • l’origine du repère est en haut à gauche de la page.

Les distances seront donc notées comme ceci : 200px (pour une distance de 200 pixels), et les angles seront notés ainsi : 90deg (pour un angle droit). En effet, en CSS, l’unité de base pour les angles est le degré.

Noter que les angles comme les distances sont potentiellement négatifs, ce qui permet de parler de coordonnées d’un élément. Simplement, si l’abscisse est négative, le transformé sera à gauche, et si l’ordonnée est négative, le transformé sera en haut.

Lorsqu’une distance (par exemple l’ordonnée d’un vecteur de translation horizontal) est nulle, il n’est pas nécessaire de préciser son unité. Ainsi, 0px, 0cm, 0%, 0deg sont toutes égales à 0 tout court. C’est une illustration de la linéarité des changements d’échelle : il y a proportionnalité lorsque la droite passe par l’origine.

Translation

La translation est une transformation que l’on peut appliquer à du texte comme toutes les autres transformations (voir plus loin). Mais on peut aussi appliquer une translation à une copie du texte, avec text-shadow qui simule une ombre portée. L’ombre est déterminée par trois longueurs (en pixels) :

  • l’abscisse du vecteur de la translation
  • l’ordonnée de ce vecteur
  • le rayon de flou.

On omettra ce dernier pour que l’ombre soit nette et qu’on voie bien l’image du texte par la translation. Par contre : on donnera la couleur bleue au texte translaté (l’ombre) afin de bien distinguer l’antécédent (en noir) et l’image (en bleu). Par exemple si le texte bleu est l’image du texte noir par la translation de vecteur (64,32), on écrira ce code dans la balise style :

  1. h2 {
  2.     text-shadow: 64px 32px blue;
  3. }

Télécharger

on obtient alors cette image :

Voici le code html complet :

  1.    <head>
  2.        <style>
  3. h2 {text-shadow: 64px 32px blue; }
  4.        </style>
  5.    </head>
  6.    <body>
  7.        <h2>Tao</h2>
  8.    </body>
  9. </html>

Télécharger

Dans la suite on ne donnera que le code css qui est dans la balise style.

transformations

Dans les onglets suivants, on montrera la page originale (sans Css) et sa version transformée pour la comparaison. On montrera des exemples de

  • translation
  • symétrie axiale
  • rotations
  • homothétie

translation

Pour appliquer à un texte h2 une translation de vecteur (64,32) on met dans le style

  1. h2 {
  2.     transform: translate(64px,32px);
  3. }

Télécharger

La page

devient alors

symétrie

La seule transformation qui est au programme de cycle 3 (symétrie axiale) voire avant, est plus compliquée à conceptualiser en Css, car c’est une rotation de 180 degrés en dehors de la page, autour d’un axe qui est dans la page. L’idée sous-jacente est que si on veut retourner une carte (passer du verso au recto), on la fait bel et bien tourner en la soulevant puis en la reposant sur la table. Pour peu que la carte soit en papier transparent, on voit effectivement une symétrie axiale se mettre en œuvre.

  • une symétrie d’axe vertical (médiane de la page et non du texte) est une rotation autour de l’axe des Y :
  1. h2 {
  2.     transform: rotateY(180deg);
  3. }

Télécharger

transformera

en

  • une symétrie d’axe horizontal est une rotation autour de l’axe des abscisses :
  1. h2 {
  2.     transform: rotateX(180deg);
  3. }

Télécharger

Elle transformera la page

en

Autres symétries

Pour appliquer une symétrie par rapport à un axe orienté de 30 degrés (dans le sens des aiguilles d’une montre), on peut conjuguer la symétrie par rapport à l’axe des abscisses, par une rotation de 30 degrés :

  1. on commence par faire tourner le texte de -30 degrés pour amener l’axe de symétrie sur l’axe des abscisses,
  2. on applique la symétrie d’axe X (l’axe des abscisses) au résultat,
  3. on applique la rotation d’angle 30 degrés pour remettre l’axe de symétrie à sa place.

Pour voir l’effet obtenu, il faut d’abord décaler le texte vers le bas, sinon le texte transformé sera trop haut (et même en dehors de la page).

En résumé, on fait

  1. h2 {
  2.     transform: translate(0,160px)
  3.                      rotate(30deg)
  4.                      rotateX(180deg)
  5.                      rotate(-30deg);
  6. }

Télécharger

ce qui transforme la page

en celle-ci :

rotations

L’effet le plus impressionnant en NSI, est la rotation. Si on veut faire tourner le texte de 45 degrés dans le sens trigonométrique on fait

  1. h2 {
  2.     transform: rotate(-45deg);
  3. }

Télécharger

En effet, on rappelle que le repère Html est inversé, avec des ordonnées croissantes vers le bas. Si on avait mis 45deg au lieu de -45deg le texte serait sorti de l’écran (par le haut). En effet le centre de rotation est en bas à droite du texte.

La page

devient sous l’effet de cette transformation :

En fait il est parfaitement possible de dessiner quand même un texte tourné de 45 degrés dans le sens des aiguilles d’une montre : il suffit d’appliquer d’abord une translation vers le bas, avant d’appliquer une rotation au résultat :

  1. h2 {
  2.     transform: translate(0,160px) rotate(45deg);
  3. }

Télécharger

Avec cette combinaison de translation et rotation, la page

est transformée en

Et la symétrie centrale ? C’est tout simplement une rotation de 180 degrés :

  1. h2 {
  2.     transform: rotate(180deg);
  3. }

Télécharger

Elle transforme la page

en

Homothéties

Une homothétie est un changement d’échelle (scale en anglais... et en Css). Par exemple pour tripler la taille du texte, on peut faire simplement

  1. h2 {
  2.     transform: scale(3) translate(160px,20px);
  3. }

Télécharger

La page

est alors transformée en

Avec Chromium, le centre de l’homothétie est en bas à droite du texte, et si on n’applique pas de translation au résultat, le texte agrandi sort de la page. Pour y remédier, on peut raisonner non en terme de transformation, mais directement de taille de texte, avec

  1. h2 {
  2.     font-size: 300%;
  3. }

Télécharger

Ce qui donne une version légèrement différente de la précédente :

On peut en fait retrouver la symétrie centrale, comme homothétie de rapport -1 :

  1. h2 {
  2.     transform: scale(-1);
  3. }

Télécharger

donne la même page que la rotation de 180 degrés : elle transforme

en

Composition

Il est possible de composer des transformations Css. Cela permet de faire découvrir expérimentalement que

  • la composée de deux translations est une translation
  • l’ordre dans lequel on compose ces translations ne change pas le résultat
  • idem pour les rotations
  • la composée d’une rotation et d’une translation est une rotation (où est son centre ?)
  • la composée d’une translation et d’une homothétie est une homothétie (où est son centre ?)
  • la composée de deux symétries axiales est une rotation.

Ce dernier fait peut être testé avec la question suivante : Quel est l’effet de la transformation Css ci-dessous ?

  1. h2 {
  2.     transform: rotateX(180deg) rotateY(180deg);
  3. }

Télécharger

(un indice : c’est une transformation déjà vue)

On peut même découvrir les similitudes directes (hors programme) en les définissant comme composées d’une translation, d’une rotation et d’une homothétie. Mais là, on sort clairement du programme du collège. On peut d’ailleurs définir une similitude directe par une matrice, et même représenter les transformations du plan par des matrices, par exemple une symétrie d’axe incliné à 45 degrés peut s’obtenir avec

  1. h2 {
  2.     transform: matrix(0,1,1,0,0,160);
  3. }

Télécharger

Les deux derniers coefficients sont ceux de la translation. La page

est transformée en

Invariants

Pour résoudre le problème des translations parfois nécessaires pour que le texte transformé ne soit pas hors de la page, on peut centrer le texte, ainsi :

  1. h2 {
  2.     text-align: center;
  3.     transform: rotate(-45deg);
  4. }

Télécharger

On voit le texte tourné sans avoir à appliquer une translation :

Cela permet la possibilité qu’après avoir appliqué une transformation à un texte, ce texte reste identique à la version non transformée. La question de détecter les textes invariants par certaines transformations, est source de nombreux exercices classiques au collège, mais avec un habillage web 2.0.

Axe horizontal

On propose ce genre d’exercice :

Voici le source d’un fichier html :

  1.    <head>
  2.        <style>
  3. h2 {
  4.     text-align: center;
  5.     transform: rotateX(180deg);
  6. }       </style>
  7.    </head>
  8.    <body>
  9.        <h2>Tao</h2>
  10.    </body>
  11. </html>

Télécharger

Le rendu dans un navigateur web est

  • Quelle transformation a été appliquée au mot Tao pour obtenir ce rendu ?
  • On décide d’appliquer la même transformation au mot BIDOCHE à l’aide de ce code html :
  1.    <head>
  2.        <style>
  3. h2 {
  4.     text-align: center;
  5.     transform: rotateX(180deg);
  6. }       </style>
  7.    </head>
  8.    <body>
  9.        <h2>BIDOCHE</h2>
  10.    </body>
  11. </html>

Télécharger

Que constate-t-on ?

  • Donner un autre mot français (écrit en majuscule) qui a la même propriété.
  • Donner les lettres de l’alphabet (en majuscules) ayant la même propriété.
  • Combien y a-t-il de nombres de deux chiffres (premier chiffre non nul) ayant la même propriété ?

Axe vertical

On propose ce genre d’exercice :

Le fichier html suivant

  1.    <head>
  2.        <style>
  3. h2 {
  4.     text-align: center;
  5.     transform: rotateY(180deg);
  6. }       </style>
  7.    </head>
  8.    <body>
  9.        <h2>Tao</h2>
  10.    </body>
  11. </html>

Télécharger

donne, dans un navigateur Internet, l’affichage de page suivant :

  • Quelle transformation a-t-elle été appliquée au texte Tao pour avoir un tel résultat ?
  • On décide d’appliquer la même transformation au texte AVA avec ce code html :
  1.    <head>
  2.        <style>
  3. h2 {
  4.     text-align: center;
  5.     transform: rotateY(180deg);
  6. }       </style>
  7.    </head>
  8.    <body>
  9.        <h2>AVA</h2>
  10.    </body>
  11. </html>

Télécharger

Quel résultat obtient-on ?

  • Combien y a-t-il de nombres dont l’écriture en chiffres romains possède la même propriété ?
  • Combien y a-t-il de nombres de trois chiffres (premier et dernier chiffre non nuls) dont l’écriture décimale possède la même propriété ?

Centre de symétrie

Le fichier html suivant :

  1.    <head>
  2.        <style>
  3. h2 {
  4.     text-align: center;
  5.     transform: rotate(180deg);
  6. }       </style>
  7.    </head>
  8.    <body>
  9.        <h2>Tao</h2>
  10.    </body>
  11. </html>

Télécharger

produit l’affichage suivant :

  • Quelle transformation a-t-elle été appliquée au texte Tao pour obtenir cet affichage ?
  • On souhaite appliquer la même transformation au texte SONOS avec ce code html :
  1.    <head>
  2.        <style>
  3. h2 {
  4.     text-align: center;
  5.     transform: rotate(180deg);
  6. }       </style>
  7.    </head>
  8.    <body>
  9.        <h2>SONOS</h2>
  10.    </body>
  11. </html>

Télécharger

Quel est l’effet obtenu ?

  • Donner un exemple de mot ayant la même propriété.
  • Combien de lettres (en majuscule) ont-elles la même propriété ?
  • Combien de nombres de deux chiffres (non nuls) ont-ils la même propriété ?
  • Comment appelle-t-on les angles des lettres N et Z ?

fonctions

En Css3, les fonctions sont données par des tableaux de valeurs, avec interpolation automatique (pour calculer les valeurs intermédiaires) par Css. On va voir deux cas :

  • les dégradés (couleur fonction de l’abscisse)
  • les animations (position fonction du temps)

dégradés

On se propose de garder le mot Tao mais comme ce mot est inclus dans un rectangle, on va colorier ce rectangle de telle manière que le côté le plus à gauche soit blanc (c’est mieux pour arriver à lire le texte) mais que le côté le plus à droite soit noir. On veut donc

  • du blanc à la position 0% (tout à gauche),
  • du noir à la position 100% (tout à droite).

On peut y arriver avec le code que voici :

  1.    <head>
  2.        <style>
  3. h2 {
  4.     background:linear-gradient(90deg, white 0%, black 100%);
  5.      }
  6.        </style>
  7.    </head>
  8.    <body>
  9.        <h2>Tao</h2>
  10.    </body>
  11. </html>

Télécharger

dans lequel il est précisé que le gradient est tourné de 90 degrés (sinon il serait dirigé selon l’axe des ordonnées). Le fichier ressemble à ceci :

représentation graphique

La fonction est linéaire entre les valeurs (clés dans le vocabulaire des animations) choisies :

Remarque : on a fait un choix arbitraire en considérant que le nombre 1 représente une quantité maximale de noir. Si on veut utiliser des nombres, on peut coder des valeurs de gris avec

rgb(255,255,255)

pour le gris le plus clair possible (pas de noir du tout), et

rgb(0,0,0)

pour le gris le plus foncé possible (que du noir).

Les fonctions ne sont pas toutes croissantes. Comment avoir une fonction qui monte et ensuite, descend (comme la fonction du boulanger) ? Il suffit de mettre une clé à une valeur intermédiaire (ici, 50%) et de remettre du blanc plus loin (à 100% par exemple) :

  1. h2 {
  2.     background:linear-gradient(90deg, white 0%, black 50%, white 100%);
  3.      }

Télécharger

ce qui donne l’effet suivant :

On peut continuer, avec une fonction qui est décroissante sur l’intervalle du milieu, et croissante avant et après :

  1. h2 {
  2.     background:linear-gradient(90deg, white 0%, black 33%, white 67%, black 100%);
  3.      }

Télécharger

qui produit cet effet :

croissance

On a vu un exemple de fonction croissante linéaire :

  1. h2 {
  2.     background:linear-gradient(90deg, white 0%, black 100%);
  3.      }

Télécharger

qui produit cet effet :

Mais l’effet n’est pas le même avec une fonction qui croit d’abord vite, ensuite plus lentement :

codée par

  1. h2 {
  2.     background:linear-gradient(90deg, white 0%, grey 75%, black 100%);
  3.      }

Télécharger

ou une fonction qui croit lentement puis accélère :

On peut faire des choses bien plus complexes avec cette fonction qui, une fois presque arrivée, recule pour mieux sauter :

  1. h2 {
  2.     background:linear-gradient(90deg, white 0%, darkgrey 25%, lightgrey 75%, black 100%);
  3.      }

Télécharger

Le rendu semble effectivement assez complexe :

animations

Comme pour les dégradés, les animations sont des fonctions définies par des points clés et interpolées entre ces points clés. Les clés s’appellent des keyframes et sont typiquement exprimées en pourcentages. À chaque pourcentage (du total de l’animation) des transformations Css sont appliquées. Par exemple si on veut que le texte Tao glisse de gauche à droite en 8 secondes, on dit qu’au début (0 pourcent) il est à sa valeur initiale (translation de vecteur nul) et au bout de 8 secondes il est tout à droite (translation de vecteur 100 pourcent de la largeur de la page). Ce qu’on écrit ainsi :

  1. h2  {
  2.     animation: glisser 8s;
  3.     animation-timing-function: linear;
  4.     }
  5. @keyframes glisser {
  6.     0% {transform: translate(0);}
  7.     100% {transform: translate(100%);}
  8. }

Télécharger

Cela produit l’effet suivant :

translation
cliquer pour voir le code html exécuté dans le navigateur (clic droit nouvel onglet conseillé)

La translation est maintenant animée, ce qui permet de voir les étapes intermédiaires et de conceptualiser les transformations comme déplacements (avec les étapes intermédiaires). Mais c’est aussi un autre regard sur les fonctions. Pour la suite on va changer de fonction : au lieu d’une fonction linéaire, on propose une fonction affine par morceaux qui monte puis descend :

  1. h2  {
  2.     animation: glisser 8s;
  3.     animation-timing-function: linear;
  4.     }
  5. @keyframes glisser {
  6.     0% {transform: translate(0);}
  7.     50% {transform: translate(100%);}
  8.     100% {transform: translate(0%);}
  9. }

Télécharger

qui donne l’effet suivant (le mot revient en arrière une fois qu’il a fini sa promenade) :

translation aller-retour
cliquer pour voir le code html exécuté dans le navigateur (clic droit nouvel onglet conseillé)

En fait, il suffit de faire varier linéairement l’ordonnée en même temps :

  1. h2  {
  2.     animation: glisser 8s;
  3.     animation-timing-function: linear;
  4.     }
  5. @keyframes glisser {
  6. #    0% {transform: translate(0,0);}
  7.     50% {transform: translate(100%,200px);}
  8.     100% {transform: translate(0%,400px);}
  9. }

Télécharger

pour que le mot parcoure la représentation graphique de la fonction (tournée puisqu’on a interverti abscisses et ordonnées) :

illustration du lien avec la fonction de transition
cliquer pour voir le code html exécuté dans le navigateur (clic droit nouvel onglet conseillé)

On peut aussi illustrer la notion de fonction par d’autres quantités qui varient au cours du temps :

  • une rotation animée (ici, d’angle 180 degrés, c’est donc une symétrie centrale) :
  1. h2  {
  2.     text-align: center;
  3.     animation: tourner 8s;
  4.     animation-timing-function: linear;
  5.     }
  6. @keyframes tourner {
  7.     50% {transform: rotate(180deg);}
  8.     100% {transform: rotate(0);}
  9. }

Télécharger

qui donne ceci :

rotation (symétrie centrale)
cliquer pour voir le code html exécuté dans le navigateur (clic droit nouvel onglet conseillé)
  • une homothétie animée :
  1. h2  {
  2.     text-align: center;
  3.     animation: grandir 8s;
  4.     animation-timing-function: linear;
  5.     }
  6. @keyframes grandir {
  7.     50% {transform: scale(4);}
  8.     100% {transform: scale(1);}
  9. }

Télécharger

qui donne cet effet :

homothétie
cliquer pour voir le code html exécuté dans le navigateur (clic droit nouvel onglet conseillé)
  • une symétrie animée d’axe vertical :
  1. h2  {
  2.     text-align: center;
  3.     animation: symetrie 8s;
  4.     animation-timing-function: linear;
  5.     }
  6. @keyframes symetrie {
  7.     50% {transform: rotateY(180deg);}
  8.     100% {transform: rotateY(0);}
  9. }

Télécharger

qui donne ceci :

symétrie axiale (axe vertical)
cliquer pour voir le code html exécuté dans le navigateur (clic droit nouvel onglet conseillé)
  • une symétrie animée d’axe horizontal :
  1. h2  {
  2.     text-align: center;
  3.     animation: symetrie 8s;
  4.     animation-timing-function: linear;
  5.     }
  6. @keyframes symetrie {
  7.     50% {transform: rotateX(180deg);}
  8.     100% {transform: rotateX(0);}
  9. }

Télécharger

qui donne ceci :

symétrie axiale (axe horizontal)
cliquer pour voir le code html exécuté dans le navigateur (clic droit nouvel onglet conseillé)

Css pour le prof

L’un des auteurs a déjà eu l’occasion de créer des fichiers avec figures animées en Css pour les intégrer à Moodle. Il s’agissait d’un cours (sur Moodle).

homothéties

Voici différentes homothéties (de rapports différents) appliquées à des triangles, en version animée :

La totale

Les 4 transformations du collège, en version animée :