Comment appliquer plusieurs propriétés de transformation à un élément en utilisant CSS ?-tutoriel CSS-php.cn

Table des matières

Propriété de transformation CSS

Grammaire

Exemple

Appliquer deux propriétés de transformation sur un élément

Appliquer plusieurs propriétés de transformation aux éléments

Utilisez plusieurs transformations

Conclusion

Maison

interface Web

tutoriel CSS

Comment appliquer plusieurs propriétés de transformation à un élément en utilisant CSS ?

Sep 02, 2023 am 11:17 AM

如何使用 CSS 将多个变换属性应用于元素？

L'une des fonctionnalités les plus puissantes de CSS est la possibilité d'appliquer plusieurs transformations à un élément, qui peuvent être utilisées pour créer des effets visuels et des animations époustouflants. Dans cet article, nous expliquerons comment appliquer plusieurs propriétés de transformation à un élément à l'aide de CSS et fournirons des exemples sur la manière d'exploiter cette technique pour améliorer l'expérience utilisateur de votre site Web.

Nous aborderons la syntaxe de base des propriétés de transformation, ainsi que des techniques plus avancées telles que l'imbrication des transformations et l'utilisation de plusieurs transformations pour créer des animations complexes. Que vous soyez un développeur Web débutant ou expérimenté, cet article vous fournira les connaissances et les compétences dont vous avez besoin pour faire passer vos compétences CSS au niveau supérieur.

Propriété de transformation CSS

La propriété

CSS transform permet aux développeurs d'appliquer diverses transformations aux éléments HTML, telles que la mise à l'échelle, la rotation, l'inclinaison et la traduction. L'attribut transform est très polyvalent et permet une conception créative et dynamique sur les pages Web.

Grammaire

element{
   transform: rotate() | scale() | skew() | translate();
}

Copier après la connexion

Exemple

Prenons un exemple de rotation d'un élément HTML à l'aide de l'attribut transform. Pour faire pivoter un élément, nous utilisons la fonction rotate, qui prend comme argument une valeur d'angle (en degrés). Voici un exemple -

&lt;html&gt;
   &lt;div class="rotate"&gt; Column &lt;/div&gt;
   &lt;style&gt;
      .rotate {
         background-color: orange;
         margin: 30px;
         width: 70px;
         height: 90px;
         transform: rotate(45deg);
      }
   &lt;/style&gt;
&lt;/html&gt;

Copier après la connexion

Appliquer deux propriétés de transformation sur un élément

Pour appliquer plusieurs propriétés de transformation à un élément, il vous suffit d'inclure chaque propriété de transformation que vous souhaitez appliquer dans la même règle CSS, séparées par des espaces.

Exemple

Par exemple, disons que vous souhaitez appliquer un effet de rotation et de mise à l'échelle à un élément. Jetons un coup d'oeil.

&lt;html&gt;
&lt;head&gt;
   &lt;style&gt;
      .rotate {
         background-color: orange;
         margin: 50px;
         width: 70px;
         height: 60px;
         text-align: center;
         letter-spacing: 1px;
      }
      .rotate:hover {
         transform: rotate(65deg) scale(1.5);
      }
   &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h1&gt;CSS Transform Properties&lt;/h1&gt;
   &lt;h3&gt;Given below is a div element which is rotated by 65deg as well as scaled up by 1.5 on hovering.&lt;/h3&gt;
   &lt;div class="rotate"&gt; Column &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Dans l'exemple ci-dessus, le sélecteur .rotate localise l'élément à transformer, et l'attribut transform contient à la fois les fonctions rotate et scale séparées par des espaces.

La fonction

rotate applique une rotation de 65 degrés à l'élément, tandis que la fonction scale redimensionne l'élément à 150 % de sa taille d'origine. Les propriétés de transformation sont appliquées lorsque vous survolez l'élément.

Appliquer plusieurs propriétés de transformation aux éléments

La syntaxe abrégée vous permet d'inclure plusieurs fonctions de transformation dans un seul attribut transform en les séparant par des virgules.

Exemple

Voici un exemple. Ici, la fonction rotate applique une rotation de 65 degrés à l'élément, tandis que la fonction scale redimensionne l'élément à 150 % de sa taille d'origine. La fonction translate déplace l'élément de 40 pixels vers la droite et de 35 pixels vers le bas par rapport à sa position d'origine. Les propriétés de transformation sont appliquées lorsque vous survolez l'élément.

&lt;html&gt;
&lt;head&gt;
   &lt;style&gt;
      .rotate {
         background-color: yellow;
         margin-left: 80px;
         width: 70px;
         height: 60px;
         text-align: center;
         letter-spacing: 1px;
      }
      .rotate:hover {
         transform: rotate(65deg) scale(1.5) translate(40px, 35px);
      }
   &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h1&gt;CSS Transform Properties&lt;/h1&gt;
   &lt;h3&gt;Given below is a div element which is rotated by 65deg as well as scaled up 150 times on hovering. Also, it translates by 40px and 35px.&lt;/h3&gt;
   &lt;div class="rotate"&gt; Column &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Utilisez plusieurs transformations

Créons une animation qui retourne la carte pour montrer son dos lorsque vous cliquez dessus. Vous pouvez y parvenir en utilisant plusieurs transformations en CSS ainsi qu'une animation d'images clés.

Exemple

&lt;html&gt;
&lt;head&gt;
   &lt;style&gt;
      .card {
         width: 200px;
         height: 300px;
         position: relative;
         transform-style: preserve-3d;
         transition: all 0.6s ease-in-out;
      }
      .card .front {
         position: absolute;
         width: 100%;
         height: 100%;
         backface-visibility: hidden;
         background-color: #FFFDD0;
      }
      .card .back {
         position: absolute;
         width: 100%;
         height: 100%;
         backface-visibility: hidden;
         background-color: #FFDEAD;
         transform: rotateY(180deg);
      }
      .card:hover {
         transform: rotateY(180deg);
      }
      .card:active {
         transform: rotateY(180deg) scale(0.8);
      }

      @keyframes flip {
         from {
            transform: rotateY(0deg);
         }

         to {
            transform: rotateY(180deg);
         }
      }
      @keyframes shrink {
         from {
            transform: rotateY(180deg) scale(1);
         }
         to {
            transform: rotateY(180deg) scale(0.8);
         }
      }
      .card:active {
         animation: flip 0.6s ease-in-out, shrink 0.6s ease-in-out;
      }      
   &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;   
   &lt;div class="card"&gt;
      &lt;div class="front"&gt;
         &lt;h2&gt; Front Side &lt;/h2&gt;
         &lt;p&gt; Hello World!! This is the front side of the card. Hover on me to see the back side. &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="back"&gt;
         &lt;h2&gt; Back Side &lt;/h2&gt;
         &lt;p&gt; Hello World!! This is the back side of the card. &lt;/p&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/body&gt; 
&lt;/html&gt;

Copier après la connexion

Lorsque le recto de la carte est survolé, nous pouvons voir le verso de la carte.

Card est un conteneur contenant deux éléments enfants, .front et .back, qui représentent respectivement le recto et le verso de la carte. Les éléments .front et .back sont positionnés absolument à l'intérieur du conteneur .card, et leur propriété backface-visibility est définie sur hidden pour les empêcher d'être visibles face à l'utilisateur.

Lorsqu'une carte est survolée, elle se retourne pour révéler son verso. Lorsque vous cliquez sur une carte, elle se retourne et se réduit à 80 % de sa taille d'origine.
Flip fera pivoter la carte de 180 degrés en 0,6 seconde, et l'animation Shrink fera rétrécir la carte à 80 % de sa taille d'origine dans le même laps de temps.
Lorsque vous cliquez sur une carte, les deux animations sont appliquées simultanément, créant une animation complexe qui comprend de multiples transformations et transitions entre le recto et le verso.

Conclusion

Dans cet article, nous avons appris que l'application de plusieurs propriétés de transformation à l'aide de CSS est un moyen simple de créer des animations et des effets complexes d'éléments HTML. À l'aide de l'attribut transform, vous pouvez appliquer diverses transformations telles que la mise à l'échelle, la rotation, l'inclinaison et la traduction à n'importe quel élément HTML de votre page Web. En combinant plusieurs propriétés de transformation, vous pouvez créer des conceptions plus dynamiques et attrayantes.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn