Transformations CSS – Traduire, faire pivoter, mettre à l'échelle et incliner

Conférence 12 : Transformations CSS – Traduire, faire pivoter, mettre à l'échelle et incliner

Bienvenue à la douzième conférence du cours "Basic to Brilliance". Aujourd'hui, nous allons explorer les Transformations CSS, une fonctionnalité puissante qui vous permet de manipuler la position, la taille et l'orientation des éléments. Nous aborderons les bases des fonctions de transformation telles que translate(), rotate(), scale() et skew().

1. Aperçu de la propriété de transformation

La propriété transform vous permet d'appliquer diverses transformations aux éléments, telles que la translation, la rotation, la mise à l'échelle et l'inclinaison. Ces transformations sont appliquées par rapport à la position d'origine de l'élément.

• Syntaxe :

  transform: transform-function(value);

2. Traduire

La fonction translate() déplace un élément de sa position d'origine le long des axes X et Y. Vous pouvez spécifier des valeurs en pixels (px), en pourcentages (%) ou en d'autres unités.

• Exemple : Traduire un élément de 50px à droite et de 30px vers le bas.

  .box {
    transform: translate(50px, 30px);
  }

Dans cet exemple, l'élément .box se déplacera de 50 px vers la droite et de 30 px vers le bas par rapport à sa position d'origine.

3. Faire pivoter

La fonction rotate() fait pivoter un élément autour d'un point fixe, qui est le centre de l'élément par défaut. L'angle de rotation est spécifié en degrés (deg).

• Exemple : Rotation d'un élément de 45 degrés.

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

Dans ce cas, l'élément .box pivotera de 45 degrés dans le sens des aiguilles d'une montre autour de son centre.

4. Échelle

La fonction scale() redimensionne un élément. Vous pouvez spécifier des facteurs d'échelle pour les axes X et Y. Une valeur de 1 signifie la taille d'origine de l'élément, tandis que les valeurs supérieures ou inférieures à 1 augmentent ou diminuent la taille, respectivement.

• Exemple : Mise à l'échelle d'un élément à 1,5 fois sa taille d'origine.

  .box {
    transform: scale(1.5);
  }

Dans cet exemple, l'élément .box sera redimensionné jusqu'à 150 % de sa taille d'origine.

5. Inclinaison

La fonction skew() incline l'élément le long des axes X et Y. Les angles sont précisés en degrés (deg).

• Exemple : Incliner un élément de 20 degrés le long de l'axe X et de 10 degrés le long de l'axe Y.

  .box {
    transform: skew(20deg, 10deg);
  }

Dans ce cas, l'élément .box sera incliné de 20 degrés horizontalement et de 10 degrés verticalement.

6. Combinaison de fonctions de transformation

Vous pouvez combiner plusieurs fonctions de transformation dans une seule propriété de transformation. Les fonctions sont appliquées dans l'ordre dans lequel elles apparaissent.

• Exemple : combinaison de traduction, de rotation et de mise à l'échelle.

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

Dans cet exemple :

• Le .box sera d'abord traduit, puis pivoté et enfin mis à l'échelle. Chaque transformation est appliquée séquentiellement.

7. Transformer l'origine

La propriété transform-origin spécifie le point autour duquel les transformations se produisent. Par défaut, il s'agit du centre de l'élément, mais vous pouvez le modifier en n'importe quel point.

• Exemple : Modification de l'origine de la transformation dans le coin supérieur gauche.

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

Dans ce cas, le .box pivotera de 45 degrés autour de son coin supérieur gauche plutôt que de son centre.

8. Transformations 3D

CSS prend également en charge les transformations 3D. Vous pouvez utiliser des fonctions telles que perspective(), rotateX(), rotateY() et translateZ() pour créer des effets 3D.

• Exemple : Ajout de perspective pour créer un effet 3D.

  .container {
    perspective: 1000px;
  }

  .box {
    transform: rotateY(45deg);
  }

Dans cet exemple :

• L'élément .container fournit une perspective, donnant l'impression que la .box tourne dans l'espace 3D.

Exercice pratique

1. Créez une animation de retournement de carte à l'aide de transformations CSS. La carte doit pivoter de 180 degrés en survol pour révéler le verso.
2. Expérimentez en combinant translation, rotation et mise à l'échelle pour créer un effet unique sur un élément.

Prochaine étape : Dans la prochaine conférence, nous plongerons dans les Animations CSS et apprendrons à créer des effets dynamiques et animés pour vos éléments Web. Préparez-vous à donner vie à vos créations avec du mouvement !

Suivez-moi sur LinkedIn-

Ridoy Hasan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!