L'utilisation de transformations CSS dans le monde réel

Conversion CSS: un outil puissant pour résoudre les difficultés de conception

Cet article explorera la puissance de la conversion CSS dans les applications du monde réel, montrera comment il peut résoudre efficacement divers défis de conception et créer des effets visuels convaincants. Nous apprendrons à aligner les éléments verticalement, à créer de belles flèches, à créer des animations de chargement et à implémenter des animations flip, etc.

La conversion

CSS3 est devenue standard en 2012, et avant cela, certains navigateurs ont fourni un soutien. La transformation vous permet de transformer facilement des éléments Web, tels que des éléments de rotation, d'échelle ou d'inclinaison, pour réaliser avec une seule ligne de code, ce qui était difficile à réaliser auparavant. La conversion CSS prend en charge les transformations 2D et 3D.

En termes de compatibilité du navigateur, tous les navigateurs grand public prennent en charge la conversion 2D, y compris Internet Explorer 9 et plus tard. La conversion 3D n'est que partiellement prise en charge dans IE10 et plus tard.

Cet article n'expliquera pas les bases de la conversion. Si vous n'êtes pas familier avec la conversion, il est recommandé de lire d'abord l'introduction à la conversion 2D et 3D.

Alignement vertical des éléments enfants

L'alignement vertical des éléments a toujours été un problème pour les concepteurs de sites Web. Bien que cela semble simple, il existe en fait de nombreuses techniques lourdes. Certaines méthodes recommandent d'utiliser display: inline et vertical-align: middle, d'autres recommandent d'utiliser display: table et leurs styles associés. Bien sûr, Flexbox ou Grid peuvent résoudre ce problème, mais pour les composants plus petits, la conversion peut être une option plus simple.

Lorsque les éléments sont très variables, l'alignement vertical peut être plus compliqué. La conversion CSS fournit un moyen efficace de résoudre ce problème. Voici un exemple simple avec deux divs imbriqués:

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

Nous définissons la largeur, la hauteur et la bordure de l'élément parent et ajoutons un espacement pour le rendre plus beau:

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

Ensuite, utilisez transform: translateY(-50%); pour centrer le texte verticalement:

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Pour éviter le flou, vous pouvez ajouter perspective(1px):

.child {
  transform: perspective(1px) translateY(-50%);
}

De cette façon, même si la longueur du texte est différente, les éléments enfants peuvent être parfaitement centrés verticalement.

Créer une flèche

Un autre cas d'utilisation intéressant consiste à créer des flèches de dialogue évolutives. Vous pouvez créer des flèches à l'aide d'un éditeur graphique, mais c'est lourd et l'image bitmap peut ne pas bien évoluer.

Les solutions CSS pures sont plus efficaces. Supposons que nous ayons une zone de texte:

<div class="box">
  <div class="box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

Créez une flèche avec le ::before pseudo-élément et convertissez-la en forme de flèche en utilisant une transformation de rotation:

.box::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: #e0e0e0;
  position: absolute;
  right: -0.5rem;
  top: 50%;
  margin-top: -0.5rem;
  transform: rotate(45deg);
}

de cette façon, même si la taille de la police de la page est modifiée, les flèches peuvent maintenir la proportion.

Créer "Jump Ball" Chargement Animation

Pour indiquer le processus de chargement, vous pouvez créer une animation de chargement de balle de saut en utilisant l'animation et la transformation CSS:

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

Créez l'animation de chargement "Rotator" à l'aide de SVG (cette pièce est similaire au texte d'origine. Pour éviter la duplication, le code détaillé est omis ici, et seul l'aperçu est conservé)

SVG peut être utilisé pour créer des animations de chargement plus complexes, telles que les filateurs. En combinant les éléments SVG, les animations CSS et les transformations, vous pouvez créer des effets de chargement visuellement attrayants.

Créer une animation de flip

Enfin, regardons un exemple d'image avec une animation de flip. Lorsque vous survolez votre souris sur l'image, il se retourne et affiche sa description. Ceci est très utile pour les sites de type Instagram. (Cette partie du contenu est similaire au texte d'origine. Pour éviter la duplication, le code détaillé est omis ici et seul l'aperçu est conservé)

Les effets d'animation en douceur en douceur peuvent être obtenus en utilisant la conversion 3D et transform-style: preserve-3d;, ainsi que les propriétés transition.

Précautions

Bien que la conversion et l'animation CSS soient puissantes, elles doivent être utilisées avec prudence pour éviter une surutilisation qui provoque une mauvaise expérience utilisateur.

Résumé

Cet article montre comment la conversion CSS peut être combinée avec d'autres technologies pour résoudre diverses tâches de conception. Nous avons appris à aligner les éléments verticalement, à créer des flèches évolutives, à sauter et à faire pivoter des animations de chargement et à implémenter des animations FLIP. N'oubliez pas que CSS doit être utilisé pour améliorer l'expérience utilisateur, pas seulement le montrer.

(Le contenu des "questions fréquemment posées sur CSS se transforme" dans le texte d'origine est très cohérente avec le contenu de cet article, il est donc omis ici)

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!