CSS3 verwendet Transform-Origin, um Punktverteilung auf einem großen Kreis und Rotationseffekte zu erzielen

Zuerst müssen wir das Attribut „transform-origin“ verwenden. Das Attribut „transform“ muss verwendet werden. Es hat viele Attribute. Wir müssen nur das Attribut „rotate“ von „transform“ verwenden (um den 2D-Rotationswinkel festzulegen) und dann „transform-origin“ verwenden, um den Mittelpunkt festzulegen. Ordnen Sie es abschließend dem CSS3-Animationsattribut „animation“ zu. Vervollständigen Sie den gewünschten Effekt.
Zunächst das Effektbild:

Kreise sind dynamisch.
Hier sind die Schritte:
1. Verwendung des Transform-Attributs:
Wir müssen diese Eigenschaft nur verwenden, um die Position des Punkts auf dem Kreis dort festzulegen, wo wir ihn benötigen. Transformieren: Drehen (um den gewünschten Grad). Darüber hinaus müssen wir auf einen Punkt achten ( wenn die kleinen Kreise am Rand des großen Kreises verteilt werden sollen, müssen wir für den großen Kreis das relative Attribut „position: relativ“ und für den kleinen Kreis das absolute Attribut „position: absolut“ festlegen, um zu verhindern, dass der kleine Kreis aus dem großen Kreis herausläuft ). Damit haben wir den ersten Schritt getan.
2. Verwendung des Transform-Origin-Attributs:
Zuerst müssen wir die Bedeutung des Transform-Origin-Attributs verstehen. Es können drei Eigenschaften festgelegt werden, die meines Wissens die drei XYZ-Achsen in einer Sequenz sind. Wir müssen hier XY2-Achsen verwenden. Die Standardeigenschaften sind 50 % 50 % 0. Was bedeutet das? Es ist ganz einfach: Legen Sie einfach die obere linke Ecke des Knotens fest, der das Transform-Origin-Attribut als Startpunkt festlegt. Bewegen Sie sich um 50 % auf der X-Achse und um 50 % auf der Y-Achse. Wenn der gewünschte Mittelpunkt nicht innerhalb des Knotens liegt, können Sie natürlich mit PX den Mittelpunkt außerhalb des Knotens angeben. Im zweiten Schritt können wir den Effekt eines kleinen Kreises erzielen, der auf der Begrenzungslinie des großen Kreises verteilt ist.
3. Verwendung von Animationsattributen:
Ebenso müssen wir zunächst wissen, dass das Animationsattribut eine Animation ist. Weitere Einzelheiten finden Sie im Dokument. Das ist, was wir brauchen.

Animation: meine ersten 10 Sekunden linear unendlich;

myfirst: ID zum Binden von @keyframes
10s: Zeit
linear: gleichmäßige Geschwindigkeit
unendlich: kontinuierlich

Schließlich mit @keyframes

 @keyframes meinerstes{
    0 %{
      transformieren: drehen(0);
    }
    25 %
      transformieren: drehen (90 Grad);
    }
    50 %{
      transformieren: drehen (180 Grad);
    }
    75 %
      transformieren: drehen (270 Grad);
    }
    100 %{
      transformieren: drehen (360 Grad);
    }
  }

Fertig

Dies ist das Ende dieses Artikels über die Verwendung von Transform-Origin in CSS3, um eine Punktverteilung auf einem großen Kreis und Rotationseffekte zu erzielen. Weitere verwandte Inhalte über die Verwendung von Transform-Origin in CSS3, um eine Punktverteilung auf einem großen Kreis und Rotationseffekte zu erzielen, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder stöbern Sie weiter unten in den verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!