Was bewirkt die Eigenschaft „transform-origin“ in CSS? Die Rolle des Transformations-Origin-Attributs

In diesem Artikel erfahren Sie, was das Attribut „transform-origin“ in CSS bewirkt. Die Rolle des Transform-Origin-Attributs hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Eine Feuerwerksanimation, die ich kürzlich erstellt habe, ist die Animation des sich ausbreitenden Feuerwerks . Während des Implementierungsprozesses blieb ich hauptsächlich während der Rotation des Feuerwerks stecken. Später stellte ich fest, dass ich kein tiefes Verständnis für die transform-origin-Attribute hatte, also fand ich ein Beispiel zum Üben und vertiefte mein Verständnis der Attribute.

transform-originFunktion

Dieses Attribut wird verwendet, um den Ursprung der Elementverformung zu ändern. Es wird im Allgemeinen am häufigsten in Verbindung mit der Drehung verwendet. Die Anzahl der empfangenen Parameter kann eins, zwei oder drei betragen. Wenn zwei Werte vorhanden sind, stellen sie jeweils den Abstand von der linken Seite des Boxmodells dar, z. B. transform-origin: 50px 50px;, was bedeutet, dass das Rotationszentrum des Containers zur oberen linken Ecke des Boxmodells als Ursprung wird Als Ursprung liegen die X- und Y-Achsen 50 Pixel voneinander entfernt.

Zeichnung des Stundenzeigers der Uhr

Der vertikale Balken in der Mitte ist unsere Anfangseinstellung, der Rest wird entsprechend gedreht dazu

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

Wie aus dem CSS-Code unten ersichtlich ist, setzen wir das Rotationszentrum auf (3.105)px der ersten vertikalen Linie als Der Ursprung für die Drehung ist hier der Wert auf der linken Seite des Abstandsboxmodells. Wenn Sie dies verstehen, können Sie andere Stundenzeiger schreiben und diese dann separat drehen, um die Stundenzeiger zu erhalten. Da ich nicht verstand, zu welcher Position der Wert hier relativ berechnet wurde, bin ich auf viele Fallstricke gestoßen.

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);
}

Verwandte Empfehlungen:

Fasst man die Entwicklungsgeschichte des CSS-Layouts zusammen, handelt es sich um die leistungsstärkste CSS-Layout-Technologie der vierten Generation

Verwendung des Border-Sizing-Attributs in CSS

Was ist CSS? Einführung in den CSS-Kaskadenstil (Code)

Das obige ist der detaillierte Inhalt vonWas bewirkt die Eigenschaft „transform-origin“ in CSS? Die Rolle des Transformations-Origin-Attributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!