Relevante Implementierungsschritte von Verformungseigenschaften in CSS3

Wir wissen, dass das transform-Attribut in CSS3 es dem Element ermöglicht, seine Form zwischen 2D und 3D zu ändern. Heute werden wir darüber sprechen Verformungsattribut in CSS3.

Transformationsattribut, die wichtigste CSS3-Änderung. Lassen Sie Elemente in 2D und 3D ihre Form ändern.

2D-Verformung

Grad stellt den Grad dar, die Einheit darf nicht kleiner sein, es gibt nur die Einheit Grad, keine anderen Einheiten.

rotate(angle) gibt den Winkel im Parameter an.

skew(x-angle,y-angle) 2D-Neigungstransformation entlang der X- und Y-Achse.

skewX(angle) 2D-Schrägtransformation entlang der X-Achse.

skewY(angle) 2D-Schrägtransformation entlang der Y-Achse.

scale(x,y)

Eine 2D-Skalierungstransformation entlang der X- und Y-Achse. Größer als 1: vergrößern, 0~1: verkleinern.

scaleX(x) legt den Wert der X-Achse fest, um die Skalierungstransformation zu definieren.

scaleY(y) legt den Wert der Y-Achse fest, um die Skalierungstransformation zu definieren.

Hinweis:

Keine Transformation: transform:none;

Mehrere Transformationen werden durch Leerzeichen getrennt. ef: transform:scale(0.5) skew(10deg,20deg) rotation(30deg);

3D-Verformung

Im Jahr 2013 startete Google Chrome36 und kündigte CSS offiziell an Eintritt in die 3D-Ära.

translate3d(x,y,z) 3D-Übersetzung entlang der X-, Y- und Z-Achse.

Raumbewegung übersetzen

TranslateX(x)-Konvertierung, verwenden Sie einfach den Wert der X-Achse.

translateY(y)-Konvertierung, verwenden Sie einfach den Wert der Y-Achse.

translateZ(z) 3D-Konvertierung, nur unter Verwendung des Z-Achsenwerts.

rotate3d(x,y,z,angle) 3D-Rotation entlang der X-, Y- und Z-Achse.

rotate rotation

rotateX(angle) 3D-Rotation entlang der X-Achse.

rotateY(angle) 3D-Rotation entlang der Y-Achse.

rotateZ(angle) 3D-Rotation entlang der Z-Achse.

Perspektive(n) definiert die Perspektive Ansicht (Schärfentiefe) für das 3D-Transformationselement.

Ich glaube, dass Sie nach dem Lesen der obigen Einführung das Wissen über Verformung beherrschen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Schritte zur Implementierung mithilfe von CSS3, um einen allmählich leuchtenden quadratischen Rahmen zu erstellen

HTML erfordert eine Kompatibilitätsprüfung. Was Browser sind

Ausführliche Erklärung und Beispiele für die Verwendung des Zeilenumbruch-Attributs in CSS3

Das obige ist der detaillierte Inhalt vonRelevante Implementierungsschritte von Verformungseigenschaften in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!