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

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

aufgeteilt werden (Kleinbuchstaben Translatex/y sind ebenfalls akzeptabel)

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

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

Positiv Zahlen drehen sich im Uhrzeigersinn, negative Werte sind erlaubt

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

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; /*增*/}

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

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

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

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); /*改*/}

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);}

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

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

.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!