Grundlegendes zur CSS-Eigenschaft „transform-origin“

Vorwort

Ich habe vor kurzem eine Feuerwerksanimation erstellt, also eine Animation von sich ausbreitenden Feuerwerken. Während der Implementierung der Animation blieb ich hauptsächlich bei der Rotation des Feuerwerks hängen. Später stellte ich fest, dass dies hauptsächlich daran lag, dass ich transform-origin Eigenschaft nicht gut genug verstanden hatte. Ich habe speziell ein Beispiel zum Üben gefunden und mein Verständnis der Eigenschaft vertieft.

transform-origin -Effekt

Mit dieser Eigenschaft wird der Ursprung der Elementverformung geändert. Sie wird am häufigsten in Verbindung mit einer Drehung verwendet. Die Anzahl der empfangenen Parameter kann eins, zwei oder drei betragen. Wenn es sich um zwei Werte handelt, stellen sie die Werte von der linken Seite des Boxmodells dar, z. B. transform-origin: 50px 50px; was bedeutet, dass der Rotationspunkt des Containers zur oberen linken Ecke des Boxmodells als Ursprung wird und die X- und Y-Achsen mit einem Abstand von 50px vom Ursprung rotieren.

Zeichnung des Stundenzeigers einer Uhr

Der vertikale Balken in der Mitte ist unsere Ausgangseinstellung, und die folgenden werden auf dieser Basis gedreht

  <div Klasse="Uhr">
    <div Klasse="Stunde"></div>
    <div Klasse="Stunde"></div>
    <div Klasse="Stunde"></div>
    <div Klasse="Stunde"></div>
    <div Klasse="Stunde"></div>
  </div>

Wie aus dem folgenden CSS-Code ersichtlich ist, setzen wir das Rotationszentrum auf (3.105)px der ersten vertikalen Linie als Ursprung für die Rotation. Der Abstand hier ist der Wert von der linken Seite des Boxmodells. Wenn Sie dies verstehen, können Sie andere Stundenzeiger schreiben und sie dann separat drehen, um die Stundenzeiger zu erhalten. Da mir die relative Stellung der Werte zur Berechnung hier nicht klar war, bin ich in viele Fallstricke getreten.

CSS

.Stunde {
  Position: absolut;
  links: 105px;
  Breite: 6px;
  Höhe: 50px;
  Hintergrundfarbe: #000;
  Rahmenradius: 6px;
  -webkit-transform-origin:3px 105px; 
          Transform-Ursprung: 3px 105px;
}
.Stunde:n-tes-Kind(2) {
  transformieren: drehen (45 Grad);
}
.Stunde:n-tes-Kind(3) {
  transformieren: drehen (90 Grad);
}
.Stunde:n-tes-Kind(4) {
  transformieren: drehen (-45 Grad);
}
.Stunde:n-tes-Kind(5) {
  transformieren: drehen (-90 Grad);
}

siehe

MDN

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.