À quoi sert la propriété transform-origin en CSS ? Le rôle de l'attribut transform-origin

Cet article vous présente ce que fait l'attribut transform-origin en CSS ? Le rôle de l'attribut transform-origin a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile

Une animation de feu d'artifice que j'ai réalisée récemment est l'animation du feu d'artifice qui se déploie. . Dans l'animation Pendant le processus de mise en œuvre, je suis resté bloqué principalement pendant la rotation des feux d'artifice. Plus tard, j'ai découvert que je n'avais pas une compréhension approfondie des attributs transform-origin, j'ai donc trouvé un exemple pour pratiquer et approfondi ma compréhension. des attributs.

transform-originFonction

Cet attribut est utilisé pour changer l'origine de la déformation d'un élément. Il est généralement utilisé le plus souvent en conjonction avec la rotation. Le nombre de paramètres reçus peut être de un, deux ou trois. Lorsqu'il y a deux valeurs, elles représentent respectivement la distance du côté gauche du modèle de boîte, comme transform-origin: 50px 50px;, ce qui signifie que le centre de rotation du conteneur devient le coin supérieur gauche du modèle de boîte comme origine, et le Les axes X et Y sont espacés de 50 px comme origine.

Dessin de l'aiguille des heures de l'horloge

La barre verticale au milieu est notre réglage initial, et le reste pivote en fonction sur ceci

  <p>
    </p><p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  

Comme le montre le code CSS ci-dessous, nous définissons le centre de rotation à (3 105)px de la première verticale ligne comme origine Rotation, la distance ici est la valeur sur le côté gauche du modèle de boîte de distance, comprenez cela, vous pouvez écrire d'autres aiguilles des heures, puis les faire pivoter séparément pour obtenir les aiguilles des heures. Parce que je ne comprenais pas à quelle position la valeur était calculée ici, j'ai rencontré de nombreux pièges.

CSS

.hour {
  position: absolute;
  left: 105px;
  width: 6px;
  height: 50px;
  background-color: #000;
  border-radius:6px;
  -webkit-transform-origin:3px 105px; 
          transform-origin:3px 105px;
}
.hour:nth-child(2) {
  transform:rotate(45deg);
}
.hour:nth-child(3) {
  transform:rotate(90deg);
}
.hour:nth-child(4) {
  transform:rotate(-45deg);
}
.hour:nth-child(5) {
  transform:rotate(-90deg);
}

Recommandations associées :

Résumant l'historique de développement de la mise en page CSS, il s'agit de la technologie de mise en page CSS de quatrième génération la plus puissante

Utilisation de l'attribut border-sizing en CSS

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!