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

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:

Bildbeschreibung hier einfügen

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!

<<:  Vermittlung der Struktur- und Ausdrucksprinzipien eines einfachen Webseiten-Layouts

>>:  Beispiel für die Anzeige eines Standardbilds, wenn in HTML kein Bild vorhanden ist

Artikel empfehlen

Detaillierte Erklärung zur Verwendung von umask unter Linux

Ich habe vor Kurzem angefangen, Linux zu lernen. ...

Grundlegende Referenztypen der erweiterten JavaScript-Programmierung

Inhaltsverzeichnis 1. Datum 2. RegExp 3. Original...

So verwenden Sie MySQL-Stresstest-Tools

1. MySQLs eigenes Stresstest-Tool – Mysqlslap mys...

Einige häufige Fehler mit MySQL null

Laut Nullwerten bedeutet der Wert Null in MySQL l...

Details zur Verwendung von Bimface in Vue

Inhaltsverzeichnis 1. Installieren Sie das Vue-Ge...

Die konkrete Umsetzung des JavaScript-exklusiven Denkens

Im vorherigen Blog hat Xiao Xiong die Methoden ve...

Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen

Heute bin ich etwas verwirrt über <a href="...

So verwenden Sie benutzerdefinierte CSS-Variablen in Vue

Inhaltsverzeichnis Die benutzerdefinierte CSS-Var...

Tutorial zu HTML-Formular-Tags (3): Eingabe-Tag

Tutorial zu HTML-Formular-Tags. In diesem Abschni...

Die Kombination und der Unterschied zwischen ENTRYPOINT und CMD im Dockerfile

Im vorherigen Artikel [Detaillierte Erläuterung v...

Detaillierte Erläuterung der geplanten MySQL-Aufgaben (Ereignisereignisse)

1. Kurze Einführung in die Veranstaltung Ein Erei...

Details zum Schreiben von React in einem Vue-Projekt

Wir können jsx/tsx-Dateien direkt erstellen Die P...

mysql-8.0.16 winx64 neuestes Installationstutorial mit Bildern und Text

Ich habe erst vor Kurzem angefangen, mich mit Dat...