Apprendre à Connaître la Propriété CSS Transform

Tu as écrit le HTML, ton CSS semble parfait, et ta page web a l’air superbe. Mais il manque quelque chose. Tu veux que ton site web soit vivant, qu’il ressorte vraiment.

C’est là que CSS transform intervient.

Cette fonctionnalité puissante te permet de déplacer, redimensionner, tourner et même incliner les éléments sur ta page. C’est comme ajouter un peu de magie, rendant tes designs interactifs et dynamiques.

Pense à des sites web où tu as pu voir des images qui s’inclinent lorsque tu passes la souris dessus, un effet de zoom pour regarder de plus près quelque chose, ou une icône sur un bouton qui se déplace lorsque tu passes la souris dessus.

C’est les transformations CSS qui travaillent en arrière-plan.

C’est une propriété simple qui peut complètement changer la façon dont les utilisateurs interagissent avec ton site web. Dans ce guide, nous allons apprendre à créer des effets visuels interactifs qui feront sortir ton site du lot.

Plongeons !

Comprendre Les Bases De La Transformation CSS

Avant de plonger dans les transformations CSS, tu dois posséder une solide base en CSS. Si tu ne connais pas déjà le CSS, consulte notre article de blog sur l’apprentissage du CSS.

Maintenant, passons directement aux transformations CSS. Les transformations CSS te permettent de manipuler visuellement un élément.

Pense à faire pivoter, redimensionner, incliner ou déplacer. Ces changements se produisent dans un espace 2D ou 3D, te donnant beaucoup de liberté créative.

Voici à quoi ressemble l’ajout d’une simple transformation CSS à un élément :

Ici :

• .element est le sélecteur pour l’élément que tu transformes.
• function(value) t’indique la transformation spécifique et la quantité que tu souhaites.

La propriété de transformation prend en charge plusieurs fonctions, qui peuvent être combinées pour créer des transformations complexes en 2D et 3D.

Explorons-en quelques-unes, d’accord ?

Exploration des Transformations CSS 2D

Les transformations CSS sont vraiment cool — elles te permettent de manipuler comment les éléments sont affichés sur une page web. Pense à cela comme déplacer des objets dans la vie réelle, mais avec du code. Ici, nous allons examiner certaines des transformations bidimensionnelles disponibles en CSS.

Éléments Rotatifs

Une des choses les plus courantes que tu peux faire avec les transformations CSS est de faire tourner des éléments. Supposons que tu aies un bouton qui dit Cliquez Moi, ou n’importe quel bouton sur ton site web. Nous pouvons utiliser la fonction rotate en CSS pour le rendre un peu plus intéressant.

Disons que tu as un bouton d’appel à l’action sur ton site web : Cliquez Moi. Voici comment tu peux utiliser rotate() pour le faire ressortir :

.cta-button {
  transition: transform 0.3s;
}

.cta-button:hover {
  transform: rotate(-10deg);
}

Alors, que faisons-nous ici ?

Nous avons spécifié que lorsque quelqu’un passe sa souris sur un bouton, il doit tourner de -10 degrés.

La transition de 0,3s spécifie combien de temps une animation doit prendre pour se compléter. Ainsi, au lieu de passer à la position tournée d’un coup, cela prend un peu de temps pour montrer à l’utilisateur une transition douce de l’état normal à l’état tourné.

Éléments de Mise à l’Échelle

La fonction scale() te permet de créer une impression de profondeur, d’accentuation et de hiérarchie visuelle dans tes conceptions.

Disons que tu as quelques témoignages de clients à disposition ; quelque chose que tu aimerais montrer à tes visiteurs de site.

Maintenant, nous ne voulons pas simplement qu’ils restent là, plats sur la page. Avec un peu de transformation CSS, tu peux les faire ressortir quand le curseur d’un utilisateur passe dessus.

.testimonial-card {
  transition: transform 0.3s;
}

.testimonial-card:hover {
  transform: scale(1.1);
}

Que faisons-nous ici ?

• Tout d’abord, nous ciblons chaque conteneur de témoignage. Nous avons supposé la classe comme testimonial-card.
• La propriété transition adoucit l’effet de mise à l’échelle sur 0,3 secondes, donc ça semble naturel. 
• Lorsqu’un utilisateur passe sa souris sur une carte, elle se met à grossir subtilement un peu (1,05 fois sa taille originale).

Ce petit changement attire l’œil de l’utilisateur et fait ressortir ce témoignage particulier. C’est une différence subtile sur la page, mais certainement remarquable.

Éléments de Distorsion

La torsion est une transformation qui te permet de pencher des éléments le long de l’axe X ou Y, créant un sentiment de mouvement et de dynamisme.

En particulier, la transformation skew() offre un moyen d’introduire un sentiment de mouvement et de dynamisme aux éléments de ton site web.

Envisage une section dédiée aux témoignages des clients. Voici comment tu peux utiliser skew() pour les mettre en valeur :

.testimonial {
  transition: transform 0.3s;
}

.testimonial:hover {
  transform: skewX(-10deg);
}

Lorsqu’un utilisateur passe la souris sur un témoignage, il s’inclinera subtilement le long de l’axe X de -10 degrés.

Cette légère inclinaison, obtenue grâce à la fonction skewX() dans la propriété de transformation CSS, ajoute un intérêt visuel sans être trop distrayante.

Tu remarqueras également que nous ajoutons systématiquement la propriété de transition en spécifiant le temps à 0.3s pour qu’une animation se termine.

Traduction Ou Déplacement D’éléments

La traduction en conception web signifie déplacer des éléments autour d’une page.

Pense à ça comme ceci : tu positionnes des éléments sur une grille, et tu peux les déplacer le long de l’axe X, Y, ou même Z sans rien changer ni déplacer d’autre.

Disons que tu as une barre de navigation sur ton site web. Tu veux qu’elle réagisse subtilement lorsque le curseur d’un visiteur passe sur les éléments du menu.

Avec translate( ), tu peux réaliser cela. Voyons un peu de code pour mieux comprendre :

.menu-item {
  transition: transform 0.2s;
}

.menu-item:hover {
  transform: translateX(10px);
}

Ce que nous avons fait ici, c’est appliquer un effet de transition simple. Maintenant, lorsque tu passes le curseur sur un .menu-item, il se déplace doucement de 10 pixels vers la droite. Sympa, non ?

La beauté des traductions, c’est qu’elles ne se limitent pas seulement aux effets de survol. Tu peux les utiliser pour créer des animations d’entrée et de sortie cool pour les éléments de ton site web, déplacer des éléments pertinents pour des pages spécifiques lorsque tu es sur cette page, et bien plus encore.

Principes De Base Des Transformations CSS 3D

Nous sommes désormais habitués à déplacer les choses vers le haut, le bas, la gauche et la droite — c’est notre mouvement 2D typique.

Toutefois, le CSS te permet de pénétrer dans le monde des transformations 3D, où nous pouvons manipuler les éléments le long de l’axe z.

Alors, quelles transformations 3D CSS offre-t-elle ?

• Tout d’abord, les fonctions de rotation : rotateX(angle), rotateY(angle) et rotateZ(angle). Pour mettre cela en perspective, rotateZ est notre roue qui tourne, rotateY est une page qui se tourne, et rotateX est un lancer de pièce. Elles contrôlent chacune la rotation autour de leurs axes respectifs.
• translateZ(z) déplace, ou translate, un élément le long de l’axe z. Une valeur positive le rapproche, tandis qu’une valeur négative l’éloigne. Pensez-y comme régler le zoom sur une caméra, en se focalisant sur différentes profondeurs.
• La fonction scaleZ(z) vous permet de dimensionner un élément le long de l’axe z. C’est comme étirer ou comprimer un élément le long d’une ligne unique. Des valeurs supérieures à 1 le font paraître plus proche de vous, tandis que des valeurs entre 0 et 1 le font reculer dans le fond.

Pour créer un effet de transformation 3D, tu dois définir une perspective sur l’élément parent. La propriété de perspective détermine la distance entre le spectateur et le plan z=0, affectant la manière dont les transformations 3D sont perçues.

Ajoutons quelques styles supplémentaires, comme la largeur, la hauteur, et la couleur de fond pour rendre la transition plus claire lorsque tu la regardes depuis ton écran :

.parent {
  perspective: 500px;
  width: 200px;
  height: 200px;
  margin: 100px auto;
}

.child {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform: rotateY(45deg);
  transition: transform 0.5s;
}

.child:hover {
  transform: rotateY(0deg);
}

Voici à quoi ressemblerait le HTML :

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

Nous avons deux divs, parent et enfant. Le parent, notre scène, a sa perspective réglée à 500 pixels. L’enfant, un carré rouge, est initialement tourné de 45 degrés le long de l’axe Y en utilisant rotateY(45deg).

En survol, nous utilisons transform: rotateY(0deg) pour réinitialiser la rotation, permettant ainsi de revenir en douceur à sa position d’origine.

Contrôler L’Origine De La Transformation CSS

Par défaut, les transformations CSS se produisent autour du centre d’un élément. Cependant, tu peux modifier ce point d’origine en utilisant la propriété transform-origin. Cette propriété te permet de spécifier les coordonnées X, Y et Z du point autour duquel la transformation doit se produire.

La syntaxe pour la propriété transform-origin est la suivante :

.element { 
transform-origin: x-axis y-axis z-axis; 
}

Les valeurs de x-axis et y-axis peuvent être spécifiées en utilisant des unités de longueur (par exemple, pixels), des pourcentages, ou des mots-clés (gauche, centre, droite, haut ou bas). La valeur de z-axis est seulement pertinente pour les transformations 3D et est spécifiée en utilisant des unités de longueur.

Voici un exemple qui montre comment la modification du transform-origin affecte une rotation :

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

Dans ce cas, l’élément pivotera de 45 degrés autour de son coin supérieur gauche au lieu de son centre.

La propriété transform-origin te donne un contrôle précis sur la façon dont les transformations sont appliquées, te permettant de créer des effets visuellement plus attrayants.

Création D’effets De Transformation CSS Complexes En Les Combinant

Un des aspects les plus puissants de la propriété de transformation CSS est la capacité à combiner plusieurs transformations pour créer des effets complexes et visuellement impressionnants. En enchaînant différentes fonctions de transformation, tu peux libérer ta créativité et créer des designs uniques et captivants.

Disons que tu as une carte produit sur ton site e-commerce. Lorsqu’un utilisateur passe la souris dessus, tu veux qu’elle s’agrandisse, tourne légèrement et se soulève de la page avec un effet d’ombre :

.product-card {
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

Lorsqu’un utilisateur passe la souris sur la carte du produit, elle s’agrandit doucement jusqu’à 1,05 fois sa taille originale, tourne de 5 degrés et gagne une ombre portée qui crée un effet de soulèvement. La combinaison de l’agrandissement, de la rotation et de l’ombre crée une interaction dynamique et captivante.

Synthèse Et Apprentissage Continu

Tu as passé du temps à apprendre les transformations CSS : rotation, redimensionnement, inclinaison et positionnement, ce qui te permet de créer des effets visuels sophistiqués. Cette compétence est vraiment précieuse pour construire des sites web qui fonctionnent bien sur différents écrans et pour rendre tes sites plus attrayants visuellement.

Cependant, il y a encore plus que tu peux faire avec ça. Si tu es intéressé à aller plus loin, tu pourrais explorer certains de ces domaines :

• Utiliser CSS pour créer des transitions et animations fluides.
• Explorer les transformations 3D pour ajouter de la profondeur à tes designs.
• Apprendre à animer des images SVG pour des effets plus complexes.
• Trouver des façons créatives de combiner les transformations avec d’autres propriétés CSS.
• Apprends Tailwind CSS et Bootstrap CSS pour rendre ton ensemble de page attrayant.

La meilleure façon de progresser est de continuer à travailler dessus et d’essayer de nouvelles choses. C’est ainsi que tu découvres ce qui est possible et que tu développes ton propre style unique.

Lorsque tu commences à jouer avec le CSS, tu auras probablement besoin d’un hébergement à haute vitesse qui ne ralentira pas ton site. Découvre les plans d’hébergement partagé de DreamHost pour tous les besoins de ton site web !