Effet de transition CSS : comment obtenir l'effet de rotation et de mise à l'échelle des éléments

Effet de transition CSS : comment obtenir l'effet de rotation et de mise à l'échelle des éléments nécessite des exemples de code spécifiques

Dans la conception d'interfaces Web, l'effet de transition est un élément de conception très important qui peut injecter une certaine vitalité et dynamique dans une page statique. Parmi eux, l'effet de rotation et de mise à l'échelle est un effet courant, qui peut rendre les éléments de la page plus vivants et plus intéressants lors de l'interaction. Cet article expliquera comment utiliser CSS pour obtenir des effets de rotation et de mise à l'échelle, et fournira une implémentation de code spécifique.

1. Obtenir un effet de rotation

Pour obtenir l'effet de rotation des éléments, vous devez utiliser l'attribut transform en CSS3. Vous pouvez obtenir la rotation des éléments via la fonction rotate() dans l'attribut transform. Cette fonction nécessite un paramètre, qui représente l'angle de rotation, qui peut être un nombre positif ou négatif. Lorsque le paramètre est un nombre positif, cela signifie que l'élément tourne dans le sens des aiguilles d'une montre ; lorsque le paramètre est un nombre négatif, cela signifie que l'élément tourne dans le sens inverse des aiguilles d'une montre.

Ensuite, montrons comment obtenir l'effet de rotation d'un élément carré. Tout d'abord, nous créons un élément div carré et définissons quelques styles de base :

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

Ensuite, nous ajoutons le code de l'effet de rotation en CSS :

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    transform: rotate(45deg);
    transition: transform 1s ease;
}

Dans le code ci-dessus, nous utilisons l'attribut de transformation et l'attribut de transition pour obtenir l'effet de rotation de éléments. Parmi eux, la valeur de l'attribut de transformation est rotate(45deg), ce qui signifie que l'élément est pivoté de 45 degrés dans le sens des aiguilles d'une montre ; la valeur de l'attribut de transition est transform 1s easy, ce qui signifie que la valeur de l'attribut de transformation de l'élément est transféré à la vitesse de la facilité en 1 seconde. De cette façon, lorsque nous actionnons l’élément pendant l’interaction, nous pouvons voir l’effet de rotation de l’élément.

2. Pour obtenir l'effet de mise à l'échelle

Pour obtenir l'effet de mise à l'échelle de l'élément, vous devez également utiliser l'attribut transform. La différence est que nous devons utiliser la fonction scale() de l'attribut transform pour obtenir la mise à l'échelle. de l'élément. La fonction scale() nécessite deux paramètres, qui représentent la mise à l'échelle horizontale et la mise à l'échelle verticale de l'élément. Lorsque le paramètre est 1, cela signifie que l'élément conserve sa taille d'origine ; lorsque le paramètre est supérieur à 1, cela signifie que l'élément est agrandi ; lorsque le paramètre est inférieur à 1, cela signifie que l'élément est réduit.

Ensuite, montrons comment obtenir l'effet de mise à l'échelle d'un élément carré. Différent de l'effet de rotation, nous devons ajouter un état de survol à l'élément avant l'interaction, de sorte que lorsque l'utilisateur déplace la souris sur l'élément, l'élément ait un effet de mise à l'échelle. Nous créons d'abord un élément div carré et définissons quelques styles de base :

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

Ensuite, nous ajoutons le code pour l'effet de zoom en CSS :

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    transition: transform 1s ease;
}

.square:hover {
    transform: scale(1.2);
}

Dans le code ci-dessus, nous utilisons l'attribut de transition et l'état de survol pour implémenter le zoom de l'élément. effet. Dans l'état d'origine, la valeur de l'attribut de transformation de l'élément est nulle et aucune mise à l'échelle n'est effectuée ; lorsque l'utilisateur déplace la souris sur l'élément, nous utilisons l'état de survol pour déclencher l'effet de mise à l'échelle de l'élément et définir la valeur de l'attribut de transformation sur scale( 1.2). Indique que l'élément est agrandi 1,2 fois. En même temps, nous utilisons également l'attribut transition pour animer l'élément pendant la transition.

3. Mise en œuvre complète des effets de rotation et de mise à l'échelle

Si nous voulons obtenir les effets de rotation et de mise à l'échelle des éléments en même temps, ils peuvent être combinés et utilisés. Dans l'attribut transform, nous pouvons utiliser plusieurs fonctions pour effectuer plusieurs transformations en même temps, et nous pouvons également utiliser l'attribut transition pour ajouter des effets d'animation à la transformation.

Ensuite, montrons comment implémenter l'effet d'animation de rotation et de mise à l'échelle d'un élément carré. Nous créons d'abord un élément div carré et définissons quelques styles de base :

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

Ensuite, nous ajoutons le code d'animation de rotation et de mise à l'échelle en CSS :

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    transform: rotate(0deg) scale(1);
    transition: transform 1s ease;
}

.square:hover {
    transform: rotate(45deg) scale(1.2);
}

Dans le code ci-dessus, nous utilisons l'attribut de transformation et l'attribut de transition pour réaliser la rotation et effet d'animation de mise à l'échelle de l'élément. Dans l'état d'origine, la valeur de l'attribut de transformation de l'élément est rotate(0deg) scale(1), ce qui signifie que l'élément n'effectue pas d'opérations de rotation et de mise à l'échelle lorsque l'utilisateur déplace la souris vers l'élément, nous utilisons l'état de survol ; pour déclencher l'effet d'animation de l'élément. La valeur de l'attribut transform est définie sur rotate(45deg) scale(1.2), ce qui signifie que l'élément est pivoté de 45 degrés dans le sens des aiguilles d'une montre et agrandi 1,2 fois avec un effet d'animation lent.

Résumé

Grâce à la démonstration ci-dessus, nous pouvons voir qu'il est très simple d'obtenir l'effet de rotation et de mise à l'échelle des éléments, il suffit d'utiliser l'attribut de transformation et l'attribut de transition en CSS3 pour y parvenir. Il nous suffit d'utiliser les fonctions rotate() et scale() pour obtenir des effets de rotation et de mise à l'échelle, puis d'utiliser l'attribut transition pour ajouter un effet de transition fluide à l'animation. Dans le même temps, dans des applications pratiques, nous pouvons combiner différentes fonctions de transformation pour créer des effets plus complexes.

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!