Informationen zur Implementierungsmethode der Attributtransformation der 2D-Ebenentransformation von CSS3-Elementen

CSS3-Formtransformation ermöglicht uns das Strecken, Skalieren usw.

In diesem Artikel werde ich hauptsächlich über das 2D-Ebenentransformations-
Attribut trans form kann transformiert werden transformation bedeutet Transformation
und wird hauptsächlich über die
-Funktion verwendet. Es gibt die folgenden Funktionen

• translator( ) Übersetzungstransformation

• ratate() Rotationstransformation

• scale() Skalierungstransformation

• skew () Schrägtransformation

• matrix() Matrixtransformation

Transform-Origin-Regel definiert das Zentrum der Transformation

Übersetzungstransformation translator

translate() hat zwei Parameter, der erste ist die relative Verschiebung der x-Achse, der zweite Parameter ist die relative Verschiebung der y-Achse

.demo {    ......
    transform: translate(100px, 200px);  <--
}

oder Translate() kann in TranslateX( ) und TranslateY()

aufgeteilt werden (Kleinbuchstaben Translatex/y sind ebenfalls akzeptabel)

.demo {    ......
    transform: translateX(100px) translateY(200px); /*改*/}

Die beiden sind gleichwertig, aber sehr problematisch

Das Ergebnis ist dass das Element um 100 Pixel nach rechts und nach unten verschoben wird. 200 Pixel verschoben

Rotationstransformation rotieren

rotate() hat einen Parameter, der den „xxdeg“ des Rotationswinkels darstellt,

Positiv Zahlen drehen sich im Uhrzeigersinn, negative Werte sind erlaubt

.demo {    ......
    transform: rotate(30deg);}

Das Ergebnis ist, dass das Element um 30° im Uhrzeigersinn gedreht wird

Das Standarddrehzentrum des Elements ist jedoch der Mittelpunkt des Element
Um das Transformationszentrum zu ändern, können Sie unser transform-origin-Attribut verwenden
Zum Beispiel möchten wir, dass sich das Element entlang der Drehung des oberen linken Scheitelpunkts bewegt

.demo {    ......
    transform: rotate(30deg);    transform-origin: 0 0; /*增*/}

Die drei Parameter von transform-origin sind x-Achsen-Abstand (x-Achse), y-Achsen-Abstand (y-Achse), z-Achsen-Abstand (z-Achse)

Standardmäßig ist die Form
transform-origin: 50% 50% 0;Zusätzlich zu Länge und Prozentsatz umfassen die optionalen X-Achsenwerte links, Mitte,
rechts Zusätzlich zu Länge und Prozentsatz umfassen die optionalen Y-Achsenwerte auch
oben, Mitte, unten Der optionale Wert der Z-Achse ist nur der Längenwert, den wir vorübergehend nicht in der
2D-Transformation

Skalierungstransformationsskala verwenden können

Beim Skalieren eines Elements wird die Größe des Elements geändert

Zwei Parameter, Breiten- und Höhenskalierungsvergrößerung (ohne Einheit)
Kann auch in ScaleX() und ScaleY() aufgeteilt werden

.demo {    ......
    transform: scale(2,2);}

Dadurch wird die Breite des Elements verdoppelt und die Höhe verdoppelt

Beachten Sie, dass es sich hierbei um echte Skalierung handelt
Das bedeutet, dass, wenn Text in Ihrem Element vorhanden ist, ein Streckungseffekt erzeugt wird
Das Äquivalent Die Form ist wie folgt

.demo {    ......
    transform: scaleX(2) scaleY(3); /*改*/}

Sie können das Transformationszentrum durch transform-origin ändern

Schräge Transformationsschräge

Schiefe bedeutet Schrägverzerrung

Diese Funktion ermöglicht es Ihnen Element linear verzerrt werden
mit zwei Parametern, dem Verzerrungswinkel der x-Achse und der y-Achse, die auch in der Form xxdeg vorliegen

.demo {    ......
    transform: skew(10deg,20deg);}

Das Äquivalent

.demo {    ......
    transform: skewX(10deg) skewY(20deg); /*改*/}

kann auch übergeben werden, transform-origin modifiziert das Transformationszentrum, ohne dass auf Details eingegangen werden muss

Matrix-Transformationsmatrix

Es klingt super NB, aber tatsächlich ist es wirklich super NB

Matrixtransformation wird seltener verwendet, sie ist die Grundlage aller oben genannten Transformationen
Ich verstehe es nicht sehr gut
Als Mathematikstudent schäme ich mich wirklich T^T
Die Matrixtransformation hat 6 Parameter, die die Drehung, Verschiebung sowie Neigung und Zoom steuern können
Der folgende Code dreht beispielsweise das Element um 30° und verschiebt die x- und y-Achse um jeweils 20 Pixel

Wenn Sie sich für Mathematik interessieren, empfehle ich das Artikelportal von Zhang sind relativ einfach und ich werde keine Bilder hinzufügen

.demo {    ......
    transform: matrix(0.866,0.5,-0.5,0.866,20,20);}

3D-Transformation
Verwandte Attribute – >Portal

Das obige ist der detaillierte Inhalt vonInformationen zur Implementierungsmethode der Attributtransformation der 2D-Ebenentransformation von CSS3-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!