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

Lösung für den Fehler beim Importieren von MySQL Big Data in Navicat

Die von Navicat exportierten Daten können nicht i...

Codebeispiel für die Verwendung der MySql COALESCE-Funktion

COALESCE ist eine Funktion, die sich nacheinander...

Zusammenfassung gängiger Docker-Befehle

Docker-Installation 1. Anforderungen: Linux-Kerne...

Zusammenfassung verschiedener Übermittlungsmethoden für HTML-Formulare

Die gebräuchlichste, am häufigsten verwendete und ...

Wartungsmethode für den Innodb-Systemtabellenbereich

Umweltbeschreibung: Es gibt eine laufende MySQL-U...

Lösung für das Problem des MySQL-Threads beim Öffnen von Tabellen

Problembeschreibung Vor kurzem gab es einen MySQL...

So verwalten Sie zwischengespeicherte Seiten in Vue

Inhaltsverzeichnis Problem 1: Zerstörung 1. Wie m...

Einführung in die wichtigsten Browser und ihre Kernel

Trident-Kern: IE, MaxThon, TT, The World, 360, So...

Detaillierte Erklärung der Vue-Komponenten

<Text> <div id="Wurzel"> &l...

Verwenden Sie js, um ein einfaches Schlangenspiel zu schreiben

In diesem Artikel wird der spezifische Code eines...

Miniprogramm zur Implementierung der Token-Generierung und -Verifizierung

Inhaltsverzeichnis Verfahren Demo Mini-Programm B...

Zusammenfassung der Tipps zum Erstellen von Webseiten

Vorwort Dieser Artikel fasst hauptsächlich einige...

So steuern Sie den Anteil untergeordneter Flex-Elemente auf der Hauptachse

Hintergrund Durch das flexible Layout wird eine e...

18 Sets exquisiter kostenloser Symbolmaterialien im Apple-Stil zum Teilen

Apple-Becher-Symbole und Extras HD StorageBox – Z...