Detaillierte Erläuterung des CSS3-Transformationsattributs und Zusammenfassung der Transformationsverwendung

HTML5 und CSS3 haben sich in den letzten Jahren rasant weiterentwickelt. Es gibt viele große und coole Websites im In- und Ausland, die die neuesten Technologien verwenden. Die Browser verschiedener Hersteller werden immer besser damit kompatibel. In CSS3 gibt es ein leistungsstarkes Attribut Transform. Mit dieser Funktion können problemlos verschiedene Spezialeffekte erzielt werden. Um einen Text zu zitieren: „Drehen, springen, ich werde nicht aufhören.“ Aus der wörtlichen Bedeutung geht hervor, dass „Transformation“ Transformation bedeutet. Zu seinen Werten gehören hauptsächlich Rotation, Schräglage, Skalierung, Übersetzung und Matrixtransformationsmatrix. Im folgenden Inhalt wird auf diese wichtige Eigenschaft in CSS3 eingegangen.

Zunächst können Sie kostenlose Kurse im Zusammenhang mit der chinesischen PHP-Website erlernen

1 Sehen Sie sich das Transformationsattribut in "CSS3 3D Special Effects Video Tutorial" an.

2. Lernen Sie das CSS3-Transformations-Tutorial in "CSS3 From Beginner to Mastery". Tutorial"

Attribut transformieren

1 . Über die Implementierung der 2D-Ebenentransformationsattributtransformation von CSS3-Elementen

Die Formtransformation von CSS3 ermöglicht es uns, Elemente zu strecken, zu skalieren usw Informationen zum 2D-Ebenentransformationsattribut „Transformation“ sind Transformationsmittel und werden hauptsächlich durch Funktionen wie „translate()“ verwendet () Die Transformations-Ursprungsregel der Matrixtransformation definiert die Mittelübersetzungstransformation der Transformation

2 Detaillierte Einführung in das Transformationsattribut in CSS3, um eine vertikale und horizontale Zentrierung von Divs mit variabler Breite und Höhe zu erreichen 🎜>

Die Kompatibilität von Transformation ist relativ optimistisch. Unter IE9 ist es nicht kompatibel. IE9 unterstützt das alternative Attribut -ms-transform, unterstützt jedoch nur die 2D-Konvertierung.

Google und Safari unterstützen das alternative Attribut -webkit-transform. IE9 und höher, Firefox und Open sind kompatibel.

Ich glaube, dass Sie in tatsächlichen Projekten definitiv auf das Problem der variablen Breite und Höhe von p sowie der vertikalen und horizontalen Zentrierung stoßen werden. Ich erinnere mich, dass ich es zuvor mit js implementiert habe.

Tatsächlich gibt es mehrere Möglichkeiten, es mit CSS zu implementieren. Ich persönlich denke jedoch, dass die Verwendung von Transform einfacher und bequemer ist, sie ist jedoch nicht mit Browsern unter IE9 kompatibel.

3.

Detaillierte Beispiele für die Unterschiede zwischen Transformations-, Übergangs- und Animationseigenschaften in CSS3

In einigen Testfällen sieht das Transformationsattribut wie „Alle“ aus mit Animation. Dies lässt einige wenige Menschen mit intuitivem Denken denken, dass das Transformationsattribut ein Animationsattribut ist. Im Gegensatz dazu ist das Transformationsattribut ein statisches Attribut. Sobald es in den Stil geschrieben ist, wird seine Wirkung direkt angezeigt, ohne dass ein Änderungsprozess erforderlich ist. Der Hauptzweck der Transformation besteht darin, spezielle Verformungen von Elementen vorzunehmen, was Designern nicht unbekannt ist. Einfach ausgedrückt handelt es sich um ein CSS-Grafikverformungswerkzeug.

4.

Detaillierte Einführung in das CSS-Transformationstransformationsattribut

transform: Transformation

Rotate: rotate(): Degree

Bevel Schnitt :skew(): Grad

skewX

skewY　

Scale: scale(): positive Zahl, negative Zahl, Dezimalzahl

scaleX

scaleY

Displacement: Translate(): Alle von CSS unterstützten Einheiten können verwendet werden

translateX

translateY

transform: Scale(2) rotieren (50 Grad); Führen Sie zuerst eine Drehung und dann eine Skalierung durch.

5. Transformationsattribut in CSS. Mit der Transformationseigenschaft können Sie den Koordinatenraum von a ändern Visuelles CSS-Modell. Durch die Transformation können Elemente verschoben (translate), gedreht (rotate), skaliert (scale) und geneigt (skew) werden.

Wenn diese Eigenschaft einen anderen Wert als „none“ hat, wird ein Stapelkontext generiert. In diesem Fall fungiert das Objekt als enthaltender Block für das darin enthaltene position:fixed-Element.

6. Die Auswirkung der CSS3-Transformation auf den HTML-Dokumentfluss

Nachdem das Transformationsattribut zum Körper (oder HTML) hinzugefügt wurde, wird das gesamte Körper-DOM entsprechenden Transformationen unterzogen, aber das „Ganze“ bezieht sich zu diesem Zeitpunkt nur auf die Standarddokumentflusselemente unter dem Körper. Für diese Position: absolut; / Position: Das feste Element; Da es aus dem Dokumentfluss, zu dem der Körper gehört, getrennt wurde, kann es auf natürliche Weise nicht den entsprechenden Transformationseffekt erzielen, indem es sich auf die Transformation des Körpers verlässt.

Verwandte Fragen und Antworten

1. Warum zwei Elemente benötigt werden, um einen Scrolleffekt zu erzeugen

2 . Warum hat der anfängliche display:block der Übergangstransformation keinen Bewegungseffekt?

3. Wie kann die CSS3-Transformation eine Mittenrotation erreichen?

[Verwandte Empfehlungen]

1. Kostenloses Video-Tutorial auf der chinesischen PHP-Website: "php.cn Dugu Jiujian (2)-CSS-Video-Tutorial"

2. Kostenloses PHP-Video-Tutorial für chinesische Websites: CSS3-Video-Tutorial für einen reibungslosen Übergangseffekt auf Webseiten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des CSS3-Transformationsattributs und Zusammenfassung der Transformationsverwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!