Web-Frontend
CSS-Tutorial
So verwenden Sie CSS-Transformationsorientierungen für komplexe Animationen
So verwenden Sie CSS-Transformationsorientierungen für komplexe Animationen
Der Transform-Origin steuert den Referenzpunkt der Transformation, der standardmäßig die Mitte ist, und kann in einen beliebigen Punkt geändert werden, um Rotation, Skalierung und andere Effekte zu erreichen. Verwenden Sie Keyword-, Prozentsatz- oder Pixelwerteinstellungen, um eine natürliche Animation mit Übergang oder Animation zu erstellen. Üblicherweise für Türscharniereffekte, Seitenwendeanimation, 3D-Transformation und multi-stufige dynamische Drehzahländerungen. Die Kombination verschachtelter Elemente und Transform-Box kann komplexe mechanische Bewegungen wie Uhrenhände erreichen. Die dynamische Einstellung des Ursprungs ermöglicht es, dass sich der Animationspivot in der Mitte verändert und den visuellen Realismus verbessert. Achten Sie auf die mobile Kompatibilität.
CSS- Transform-Origin ist eine leistungsstarke Eigenschaft, die den Punkt steuert, an dem Transformationen wie Rotation, Skalierung und Verschleierung angewendet werden. Wenn Sie komplexe Animationen aufbauen, können Sie mit dem Verständnis und der Manipulation transform-origin eine genaue Kontrolle darüber erhalten, wie sich Elemente im Weltraum bewegen und sich verhalten-und die Animationen natürlicher und beabsichtigter anfühlen.
Verständnis der Grundlagen von Transform-Ursprung
Standardmäßig werden Transformationen aus der Mitte eines Elements ( 50% 50% ) angewendet. Sie können diesen Ursprung jedoch auf jeden Punkt ändern:
.Element {
Transform-Origin: Oben links; / * Oder 0% 0% *///
Transformation: Drehen (45 Grad);
}
Dies dreht das Element um die obere linke Ecke anstelle der Mitte. Sie können Schlüsselwörter ( top , center , bottom , left , right ), Prozentsätze oder Pixelwerte verwenden.
Für 3D-Animationen können Sie auch einen Z-Achse-Ursprung festlegen:
.Transform-3D {
Transform-Stil: Preserve-3d;
Transform-Origin: 50% 50% 100px;
}
Animatierscharniere und Gelenke (wie Türen oder Flaggen) animieren
Verwenden Sie transform-origin , um reale Drehzüchter zu simulieren. Zum Beispiel sollte sich eine Tür um die Kante drehen.
.door {
Transform-Ursprung: linker Zentrum;
Übergang: 0,5 -Leichte transformieren;
}
<p>.door: schwebe {
Transformation: Rotatey (60 Grad);
}</p>Dadurch wird die Tür von der linken Seite geöffnet. Das Anpassen des Ursprungs erzeugt eine realistische mechanische Bewegung ohne JavaScript.
Für einen Seitenwechsel-Effekt in einem Buch UI:
- Setzen Sie
transform-origin: right centerfür das Flippen von links nach rechts - Kombinieren Sie mit
perspectiveundrotateYfür Tiefe - Animed
transform-originselbst, wenn sich der Drehzahl mit der Animation verändert
Dynamische Herkunft in mehrstufigen Animationen
Manchmal muss sich der Drehpunkt während einer Animation ändern. Sie können neben anderen Transformationen transform-origin .
@Keyframes Windmill {
0% {
Transform-Origin: 50% 50%;
Transformation: Drehen (0);
}
25% {
Transform-Origin: 100% 50%; / * Pivot verschiebt sich nach rechts */
Transformation: Drehen (90 Grad);
}
50% {
Transform-Origin: 50% 100%; / * Nun von unten abzweif *//
Transformation: Drehen (180 Grad);
}
}
Dies ermöglicht kreative Übergänge, bei denen sich das Bewegungszentrum entwickelt - nützlich für abstrakte Lader oder Morphing -Schnittstellen.
Kombination mit verschachtelten Transformationen für fortschrittliche Effekte
Für komplexe Komponenten (z. B. ein Roboterarm oder Ladespinner) transformiert die Schicht mithilfe von Eltern-Kind-Beziehungen.
- Stellen Sie
transform-origindes Elternteils fest, um die Gesamtrotation zu kontrollieren - Kinderelemente können ihren eigenen Ursprung für eine unabhängige Bewegung haben
- Verwenden Sie
transform-box: fill-boxoderview-boxum den Ursprung auf SVG-Pfaden oder -Symbole zu basien
Beispiel: Eine Uhr mit rotierenden Händen
.Clockhand {
Transform-Origin: 90% 90%; / * Außerhalb der Mitte für visuelle Balance *//
Animation: Tittock 2S Unendliche Schritte (60);
}
Im Grunde genommen bedeutet das Beherrschen transform-origin dass Sie nicht nur Elemente bewegten, sondern sie choreografieren sie. Egal, ob es sich um subtile Schwebeffekte oder animierte Geschichten aus dem Bildschirm handelt, es ist der Schlüssel zum professionellen Motion-Design. Denken Sie daran, über Geräte hinweg zu testen, da sich 3D -Ursprünge in mobilen Browsern unterschiedlich verhalten können.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS-Transformationsorientierungen für komplexe Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Stock Market GPT
KI-gestützte Anlageforschung für intelligentere Entscheidungen
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
CSS-Animationshandbuch: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Blitzeffekte erstellen
Oct 20, 2023 pm 03:55 PM
CSS-Animationsleitfaden: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Blitzeffekte erstellen. Einführung: CSS-Animationen sind ein unverzichtbarer Bestandteil des modernen Webdesigns. Es kann lebendige Effekte und Interaktivität auf Webseiten bringen und das Benutzererlebnis verbessern. In dieser Anleitung werfen wir einen genaueren Blick darauf, wie man mit CSS einen Blitzeffekt erzeugt, zusammen mit konkreten Codebeispielen. 1. Erstellen Sie eine HTML-Struktur: Zuerst müssen wir eine HTML-Struktur erstellen, um unsere Blitzeffekte zu berücksichtigen. Wir können ein <div>-Element verwenden, um den Blitzeffekt zu umschließen und bereitzustellen
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Umblättereffekte erzielen
Oct 24, 2023 am 09:30 AM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Umblättereffekte implementieren. Spezielle Codebeispiele sind erforderlich. CSS-Animationen sind ein unverzichtbarer Bestandteil des modernen Website-Designs. Es kann Webseiten lebendiger machen, die Aufmerksamkeit der Benutzer erregen und die Benutzererfahrung verbessern. Einer der häufigsten CSS-Animationseffekte ist der Umblättereffekt. In diesem Tutorial werde ich Sie Schritt für Schritt anleiten, um diesen auffälligen Effekt zu erzielen, und konkrete Codebeispiele bereitstellen. Zuerst müssen wir eine grundlegende HTML-Struktur erstellen. Der Code lautet wie folgt: <!DOCTYPE
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie den Ein- und Ausblendeffekt erzielen
Oct 18, 2023 am 09:22 AM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie den Ein- und Ausblendeffekt implementieren, einschließlich spezifischer Codebeispiele. Bei Webdesign und -entwicklung können Animationseffekte die Seite lebendiger und attraktiver machen. CSS-Animationen sind eine einfache und leistungsstarke Möglichkeit, diesen Effekt zu erzielen. In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie mit CSS den Fade-Effekt erzielen, und stellen spezifische Codebeispiele als Referenz bereit. 1. Einblendeffekt Der Einblendeffekt bezieht sich auf den Effekt, bei dem ein Element allmählich von einer Transparenz von 0 zu einer Transparenz von 1 wechselt. Hier sind die Schritte und das Codebeispiel, um den Einblendeffekt zu erzielen: Schritt 1:
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie den besonderen Effekt von fließendem Wasser erzielen
Oct 21, 2023 am 08:52 AM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie man den besonderen Effekt von fließendem Wasser umsetzt. Vorwort: CSS-Animation ist eine häufig verwendete Technologie im Webdesign. Sie macht Webseiten lebendiger und interessanter ' Aufmerksamkeit. In diesem Tutorial lernen wir, wie man mit CSS einen fließenden Wassereffekt erzielt, und stellen spezifische Codebeispiele bereit. Fangen wir an! Schritt eins: HTML-Struktur Zuerst müssen wir eine grundlegende HTML-Struktur erstellen. Fügen Sie ein <di zum <body>-Tag hinzu
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Pulseffekte implementieren
Oct 21, 2023 pm 12:09 PM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Impulseffekte implementieren. Es sind spezifische Codebeispiele erforderlich. Einführung: CSS-Animationen sind ein häufig verwendeter Effekt im Webdesign. Sie können Webseiten Lebendigkeit und visuelle Attraktivität verleihen. In diesem Artikel erhalten Sie ein detailliertes Verständnis dafür, wie Sie mit CSS Impulseffekte erzielen, und stellen spezifische Codebeispiele bereit, die Ihnen Schritt für Schritt zeigen, wie Sie dies durchführen. 1. Verstehen Sie den Pulseffekt. Der Pulseffekt ist ein zyklischer Animationseffekt. Er wird normalerweise auf Schaltflächen, Symbolen oder anderen Elementen verwendet, um ihm einen schlagenden und blinkenden Effekt zu verleihen. Animieren von Eigenschaften und Schlüsseln über CSS
Tipps und Methoden zur Verwendung von CSS, um Jitter-Effekte zu erzielen, wenn die Maus schwebt
Oct 21, 2023 am 08:37 AM
Tipps und Methoden zur Verwendung von CSS zum Erzielen von Jitter-Effekten beim Schweben der Maus. Die Jitter-Effekte beim Schweben der Maus können der Webseite etwas Dynamik und Interesse verleihen und die Aufmerksamkeit des Benutzers erregen. In diesem Artikel stellen wir einige Techniken und Methoden zur Verwendung von CSS vor, um Jitter-Effekte beim Bewegen der Maus zu erzielen, und stellen spezifische Codebeispiele bereit. Das Prinzip des Jitters In CSS können wir Keyframe-Animationen (Keyframes) und Transformationseigenschaften verwenden, um den Jitter-Effekt zu erzielen. Mit der Keyframe-Animation können wir eine Animationssequenz definieren
Erkundung der CSS-Animationseigenschaften: Übergang und Transformation
Oct 20, 2023 pm 03:54 PM
Erkundung der CSS-Animationseigenschaften: Übergang und Transformation. Um die Interaktivität und die visuellen Effekte von Webseiten zu erhöhen, verwenden wir in der Webentwicklung häufig CSS-Animationen, um den Übergang und die Transformation von Elementen zu realisieren. In CSS gibt es zwei häufig verwendete Eigenschaften, mit denen Animationseffekte erzielt werden können: Übergang und Transformation. In diesem Artikel wird die Verwendung dieser beiden Eigenschaften ausführlich untersucht und spezifische Codebeispiele gegeben. 1. Übergangsattribut transitio
Tipps und Methoden zur Verwendung von CSS zur Erzielung spezieller Effekte für die Bildanzeige
Oct 24, 2023 pm 12:52 PM
Tipps und Methoden zur Verwendung von CSS zur Erzielung spezieller Effekte für die Bildanzeige Ob es sich um Webdesign oder Anwendungsentwicklung handelt, die Bildanzeige ist eine sehr häufige Anforderung. Um das Benutzererlebnis zu verbessern, können wir mithilfe von CSS einige coole Bildanzeigeeffekte erzielen. In diesem Artikel werden mehrere häufig verwendete Techniken und Methoden vorgestellt und entsprechende Codebeispiele bereitgestellt, um den Lesern den schnellen Einstieg zu erleichtern. 1. Bildzoom-Spezialeffekte Zoom-Maus-Hover-Effekt Wenn die Maus über dem Bild schwebt, kann die Interaktivität durch den Zoom-Effekt erhöht werden. Das Codebeispiel lautet wie folgt: .image-zoom{
