rotation des effets CSS3

Rotation des effets spéciaux CSS3

Dans la conception Web, les effets spéciaux dynamiques peuvent augmenter l'interactivité et le talent artistique de la page Web, permettant ainsi aux utilisateurs de naviguer sur le Web plus joyeusement. Parmi eux, l’effet de rotation est un effet spécial relativement courant. En CSS3, les effets de rotation peuvent être obtenus grâce à l'attribut transform.

1. Utilisez la transformation pour obtenir une rotation

L'attribut transform en CSS3 est utilisé pour obtenir des effets de déformation d'éléments, tels que la rotation, le mouvement, la mise à l'échelle, etc. Lors de la réalisation de l'effet de rotation de l'élément, vous pouvez utiliser la fonction de rotation rotation. La syntaxe spécifique est la suivante :

transform: rotate(rotation angle);

where l'angle de rotation. est en degrés, vous pouvez Est-ce un nombre positif, un nombre négatif ou 0.

2. Obtenez un effet de rotation d'image

1. Effet de rotation de base

Ce qui suit est un exemple simple, qui peut être obtenu en survolant la souris. sur l'image Pour réaliser l'effet de rotation de l'image, le code CSS est le suivant :

.rotate-img{
transition : transformation 0.5s facilité;
}# #.rotate-img:hover{
transform: rotate(360deg);
}

Dans ce code, l'attribut de transition est utilisé pour obtenir l'effet de transition d'animation, où transform représente l'attribut de transition et 0,5 s représente le temps de transition, easy représente le mode de transition. Dans la pseudo-classe :hover, utilisez la fonction transform:rotate pour obtenir l'effet de rotation, où l'angle de rotation est de 360 degrés.

2. Rotation avec effet de mise à l'échelle

Dans l'effet de rotation de base ci-dessus, vous pouvez obtenir des effets de rotation sous différents angles en modifiant les paramètres d'angle de rotation. Dans le même temps, nous pouvons également combiner l'effet de zoom pour obtenir un effet de rotation plus frais. Voici un exemple de code :

.rotate-img{

transition : transformation facile en 0,5 s ;
}
.rotate-img:hover{
transform: rotate(360deg) scale(1.5);
}

Dans ce code, transform:rotate(360deg) scale(1.5) signifie que lors de la rotation, il y aura un Double de 1,5 effet de zoom. Bien entendu, le facteur de zoom et d'autres effets d'animation peuvent être ajustés vous-même.

3. Réalisez l'effet de rotation du menu de navigation

En plus de réaliser l'effet de rotation sur l'image, vous pouvez également réaliser l'effet de rotation sur le menu de navigation et autres éléments. Voici un exemple de code :

.rotate-menu{

display: flex;
justifier-content: center;
}
.rotate-menu li{
position : relative ;
marge : 0 1em ;
transition : transformation facile en 0,5 s ;
}
.rotation-menu li a{
display: block;
padding: 10px 20px;
}
.rotate-menu li:hover{
transform: rotate(360deg);
}
.rotate-menu li:hover a{
text-shadow: 0px 0px 2px #fff;
}

Dans ce code, l'élément li est ajouté au menu de navigation, et définissez l'attribut position sur l'élément li, puis déclenchez l'effet de rotation via la pseudo-classe :hover. Dans le même temps, ajoutez un style texte-ombre au texte du menu pour obtenir un effet plus tridimensionnel.

Summary

En CSS3, l'utilisation de l'attribut transform peut facilement obtenir l'effet de rotation des éléments, et peut également être combiné avec la mise à l'échelle, le mouvement et d'autres effets pour obtenir des effets dynamiques plus cool . Dans la conception Web, une utilisation appropriée des effets de rotation peut améliorer l'expérience utilisateur et le talent artistique des pages Web, mais veillez à ne pas en abuser pour éviter d'affecter la vitesse des pages Web.

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!