Transformation CSS : comment obtenir l'effet de rotation des éléments

Transformation CSS : Comment obtenir l'effet de rotation des éléments nécessite des exemples de code spécifiques

Dans la conception Web, les effets d'animation sont l'un des moyens importants pour améliorer l'expérience utilisateur et attirer l'attention de l'utilisateur, et l'animation de rotation est l'un des plus les classiques. En CSS, vous pouvez utiliser l'attribut « transform » pour obtenir divers effets de déformation des éléments, y compris la rotation. Cet article présentera en détail comment utiliser la « transformation » CSS pour obtenir l'effet de rotation des éléments et fournira des exemples de code spécifiques.

1. Comment utiliser CSS "transform" pour obtenir l'effet de rotation des éléments

L'attribut "transform" de CSS est l'API de base pour la rotation, le mouvement, la mise à l'échelle, l'inclinaison et d'autres effets de déformation des éléments. un seul élément ou un ensemble d'éléments. Pour obtenir l'effet de rotation d'un élément, il suffit de définir la valeur de l'attribut "transform" sur "rotate (valeur d'angle)", où la "valeur d'angle" est une valeur en degrés, qui peut être un nombre positif, un nombre négatif. , ou un nombre décimal. Pour un élément pivoté, son centre de rotation est par défaut le point central de l'élément.

Voici le format syntaxique de l'attribut "transform":

transform: none|transform-functions;

Parmi eux, "aucun" signifie aucune transformation, et "transform-functions" est une combinaison de diverses fonctions de transformation spécifiques. Pour l'effet de rotation, il suffit d'utiliser la fonction de transformation "rotate()".

Voici l'implémentation spécifique du code :

.rotate {
  transform: rotate(30deg); /* 旋转30度 */
}

Dans l'exemple ci-dessus, ".rotate" est un nom de classe CSS, qui peut être appliqué à tous les éléments du document HTML qui nécessitent des effets de rotation. Ici, l'élément pivote de 30 degrés.

En plus d'utiliser la fonction "rotate()" pour obtenir des effets de rotation indépendamment, nous pouvons également l'utiliser en combinaison avec d'autres fonctions de déformation pour obtenir des effets plus complexes. Par exemple, le code suivant fait pivoter un élément de 30 degrés et le met à l'échelle en même temps :

.rotate-scale {
  transform: rotate(30deg) scale(1.5);
}

2. Exemples de code spécifiques

Voici quelques exemples de code spécifiques qui permettent aux lecteurs de mieux comprendre comment utiliser la "transformation" CSS pour mettre en œuvre des éléments.

Exemple 1 : Rotation de base

Code HTML :

<div class="rotate-box">
  <img src="/static/imghw/default1.png"  data-src="img/logo.png"  class="lazy" alt="">
</div>

Code CSS :

.rotate-box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(30deg);
}

Dans cet exemple, nous définissons une classe "rotate-box" qui contient un conteneur de 200 × 200 pixels et une image. En définissant les propriétés "justify-content" et "align-items", nous centrons l'image. Ensuite, utilisez la propriété « transformer » pour faire pivoter le conteneur de 30 degrés.

Exemple 2 : Rotation de plusieurs graphiques

Code HTML :

<div class="rotate-container">
  <div class="rotate-box box-1"></div>
  <div class="rotate-box box-2"></div>
  <div class="rotate-box box-3"></div>
</div>

Code CSS :

.rotate-container {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 0 auto;
}

.rotate-box {
  width: 100px;
  height: 100px;
  background-color: #009688;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
}

.box-1 {
  transform: rotate(45deg);
}

.box-2 {
  transform: rotate(135deg);
}

.box-3 {
  transform: rotate(225deg);
}

Dans cet exemple, nous définissons un conteneur « rotation-conteneur », puis définissons 3 rotations différentes dans les graphiques du conteneur. En définissant la propriété "position", ces graphiques peuvent se chevaucher et la propriété "transform-origin" peut placer le centre de rotation des graphiques au centre exact des graphiques. Enfin, en définissant respectivement différents attributs de « transformation » de chaque graphique, l'effet de rotation sous différents angles est obtenu.

Exemple 3 : Animation à rotation infinie

Code HTML :

<div class="rotate-box"></div>

Code CSS :

.rotate-box {
  width: 100px;
  height: 100px;
  background-color: #3f51b5;
  animation-name: rotate-animation;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Dans cet exemple, nous utilisons les propriétés d'animation CSS pour obtenir l'effet de rotation infinie. Nous définissons un élément appelé "rotate-box" et définissons le mot-clé de l'animation (tel que "animation-name") sur le type "rotate-animation". Ensuite, différents états au cours du processus d'animation sont définis via la règle "@keyframes", y compris les changements d'angle de rotation de 0 degrés à 360 degrés.

Grâce aux trois exemples de code ci-dessus, les lecteurs peuvent maîtriser différentes méthodes d'utilisation de l'attribut "transform" de CSS pour obtenir des effets de rotation. En développement réel, ces méthodes peuvent être combinées et ajustées de manière flexible en fonction des besoins spécifiques du projet.

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!