Propriété de transformation CSS: quatre utilisations courantes

La propriété CSS transform permet à un développeur d'effectuer un certain nombre d'actions différentes sur un élément qui modifie la façon dont cet élément apparaît dans le navigateur. Bien que le domaine des possibilités de ce que vous pouvez faire avec une ou plusieurs valeurs de transformation soit très vaste, voici quelques utilisations courantes pour gagner du temps sur votre prochain projet.

Centrage des icônes verticalement (ou horizontalement)

Le premier exemple de valeur de transformation CSS que je veux examiner est translate () .

Parlons de la transformation CSS translate ()

Ce que translate () nous permet de faire est de déplacer un élément sans affecter le flux normal du document. Si vous avez deux éléments côte à côte et que vous appliquez une valeur margin-left à l'élément de gauche, les deux éléments seront poussés vers la gauche. La marge affecte le flux normal du document. Si vous souhaitez déplacer l'un des éléments sans que n'affecte le positionnement des éléments autour de lui, c'est ici que vous pouvez utiliser translate () .

Une chose à noter d'abord est comment fonctionnent les pourcentages. Les pourcentages utilisés comme valeurs pour des éléments tels que la marge ou la largeur sont calculés en fonction de la largeur de l'élément parent, donc si j'ai un conteneur de 400 px de large et que je dis à un élément enfant de ce conteneur une largeur de 50% ou une marge à gauche de 50%, ces deux valeurs seraient calculées comme 200 pixels. Cependant, lorsque vous utilisez une règle translate () les pourcentages sont calculés en fonction de la largeur de cet élément. Jetez un œil au code ci-dessous. J'ai placé deux éléments de paragraphe dans un conteneur d'une largeur de 600 pixels et je les ai définis comme ayant une largeur de 50% (300 pixels). J'ai défini margin-left: 50%; sur le premier paragraphe et transform: translateX (50%); sur le second, ce qui montre que le premier paragraphe est repoussé de 300 px

Voir le Pen
Percentage Showcase de Zach Handing ( @zachhanding )
on CodePen .

Positionnement de cette icône!

Dans cet esprit, examinons le positionnement d'une icône de n'importe quelle taille pour se centrer verticalement dans son conteneur.

Disons que nous avons une liste de liens et que nous voulons mettre une icône de flèche dans chaque lien pour donner un autre signal visuel qu'il emmènera l'utilisateur quelque part. Dans ce cas, cette icône ne fournit aucune signification sémantique à l'élément; cela ne fait qu'ajouter à la conception. Nous pouvons ajouter cette icône avec CSS au lieu de la mettre dans le balisage. Maintenant, nous pouvons absolument positionner l’icône à droite, mais comment s’assurer qu’elle est parfaitement centrée verticalement? Si nous connaissons la hauteur de l'icône, nous pouvons ajouter une valeur supérieure de 50%, puis soustraire la moitié de la hauteur de l'icône, mais que se passe-t-il si nous mettons une nouvelle icône ou utilisons ce composant ailleurs avec des valeurs différentes? Nous ne voulons pas coder en dur les valeurs de positionnement.

Si nous combinons le positionnement supérieur de 50% (pour que le haut de l'icône soit centré verticalement), nous pouvons alors combiner cela avec une valeur de translation pour déplacer l'icône jusqu'à la moitié de sa hauteur et vous n'avez pas à vous soucier de la valeur de cette hauteur.

 a :: after {
    position: absolue;
    à droite: 1rem;
    haut: 50%;
    transformer: translateY (-50%);
} 

Voir le stylo
Transform: Translate de Zach Handing ( @zachhanding )
sur CodePen .

The Digital Essentials, Part 3

Développer une stratégie numérique robuste est à la fois un défi et une opportunité. La troisième partie de la série Digital Essentials explore cinq des expériences technologiques essentielles auxquelles les clients s'attendent, que vous pourriez manquer ou ne pas utiliser pleinement.

Obtenir le guide

Et maintenant, notre icône est parfaitement centrée verticalement dans le lien.

Jetez un œil au Tutoriel pour les développeurs: Comment créer un triangle avec CSS pour voir comment j'ai créé cette icône en utilisant uniquement CSS!

Agrandir ou réduire la taille avec une transformation CSS [19659003] Regardons maintenant la valeur de transformation scale () . Si nous appliquons une transformation d'échelle à un élément, nous modifions sa taille. Tout comme avec translate () scale () ajuste la taille de l'objet par rapport à sa propre largeur ou hauteur. Ceci est utile lors de simples états de survol si nous voulons faire ressortir un peu l'élément. Les valeurs utilisées pour scale () peuvent à nouveau être des pourcentages, ou une échelle de 0 à 1 (0 étant 0%, 1 étant 100%). L'exemple ci-dessous montre les cartes augmentant à 110% de leur largeur et hauteur d'origine en les survolant. Il s'associe également à la propriété transition pour devenir une animation transparente.

 li: hover {
    transformer: échelle (1,1);
    transition: transformez 144ms en douceur;
} 

Voir le stylo
Transform: Scale de Zach Handing ( @zachhanding )
sur CodePen .

La meilleure partie de scale () est que puisque nous ne réglons pas la valeur de largeur ou de hauteur des cartes, les autres cartes ne sont pas bousculées par le changement de taille!

Retourner un élément

Notre prochain cas d'utilisation d'une transformation CSS approfondira le fonctionnement de scale () en ajoutant deux informations importantes:

1. Vous pouvez choisir de mettre à l'échelle uniquement des axes spécifiques en utilisant scaleX ( ) ou scaleY ()
2. Vous pouvez utiliser des valeurs négatives!

Lorsque vous utilisez une valeur de -1 à l'intérieur de scale () cela indique à l'élément de se mettre à l'échelle complètement jusqu'à zéro, puis ressortez de l'autre côté à sa taille d'origine… mais maintenant c'est à l'envers! Ceci est incroyablement utile en nous permettant d'utiliser une icône dans plusieurs directions! Jetez un œil à l'extrait de code ci-dessous pour voir comment nous pouvons prendre une flèche orientée vers la droite (ou dans ce cas la main) et la faire pointer vers la gauche.

 img: hover {
    transformée: scaleX (-1);
} 

Voir le stylo
Transform: Scale Flip de Zach Handing ( @zachhanding )
sur CodePen .

Rotation d'un Élément

Le dernier exemple que je souhaite aborder est probablement le plus utilisé. Cela nécessite de retourner un élément au niveau suivant. Au lieu de mettre en miroir un élément, vous pouvez utiliser la transformation CSS rotate () pour le faire pivoter à l’angle de votre choix. Ici, nous regardons un accordéon avec une icône de flèche sur le côté droit comme notre autre exemple. Lorsque l'élément d'accordéon est ouvert, nous faisons pivoter l'icône de 90 degrés. Comme cela est combiné avec notre exemple de traduction, vous pouvez voir comment combiner plusieurs transformations est également possible.

 .btn-link {
    &::après {
        transformer: translateY (-50%);
    }
  
    & .collapsed :: après {
        transformer: translateY (-50%) tourner (-90deg);
    }
} 

See the Pen
Transform: Rotate by Zach Handing ( @zachhanding )
on CodePen .

Et voilà ont quatre utilisations courantes de la propriété transform () en CSS. Partagez dans les commentaires si vous avez d'autres façons créatives de l'utiliser!

À propos de l'auteur

Je suis un développeur front-end travaillant chez Perficient Digital, et je suis passionné par HTML, CSS et griller le poulet .

Plus de cet auteur