CSS3-Übergänge und 2D-Transformationen – Überprüfung-CSS-Tutorial-php.cn

1.Übergang
Syntax: Übergang: Eigenschaftsdauer Timing-Funktionsverzögerung;
Übergangseigenschaft Legen Sie den CSS-Eigenschaftsnamen des Übergangseffekts fest
Syntax: transit-property: none |. all |. property
none Keine Eigenschaften erhalten den Übergangseffekt
Alle Eigenschaften erhalten den Übergangseffekt.
Eigenschaft definiert eine Liste von CSS-Eigenschaftsnamen, die Übergangseffekte anwenden. Die Liste ist durch Kommas getrennt.
Einzugselementattributname
Übergangsdauer Wie viele Sekunden oder Millisekunden es dauert, bis der Übergangseffekt abgeschlossen ist
Syntax: Übergangsdauer: Zeit;
Zeit gibt die Zeit an, die zum Abschluss des Übergangseffekts benötigt wird . Der Standardwert ist 0, was bedeutet, dass es keinen Effekt gibt
　　Transition-Timing-Funktion gibt die Geschwindigkeitskurve des Geschwindigkeitseffekts an.
Syntax: Transition-Timing-Function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
linear gibt die gleiche Geschwindigkeit an Ein Übergangseffekt von Anfang bis Ende.
Ease gibt an, dass es mit langsamer Geschwindigkeit beginnt, dann schnell wird und dann mit langsamer Geschwindigkeit endet.
　　　　　ease-in bezeichnet einen übermäßigen Effekt, der bei langsamer Geschwindigkeit beginnt.
　　　　　ease-out bezeichnet einen übermäßigen Effekt, der mit einer langsamen Geschwindigkeit endet.
Ease-in-out gibt einen Übergangseffekt an, der mit langsamer Geschwindigkeit beginnt und endet.
Kubikbezier(n,n,n,n) Definieren Sie Ihren eigenen Wert in Kubikbezier. Mögliche Werte sind Werte zwischen 0 und 1.
Übergangsverzögerung Definiert, wann der Übergangseffekt beginnt.
Syntax: Übergangsverzögerung: Zeit;
Zeit gibt die Zeit an, die gewartet werden soll, bevor der Übergangseffekt beginnt.

Beispiel:

　　

Ergebnis: Wie in der Abbildung gezeigt

Die Bedeutung von Änderung umfasst in CSS3 hauptsächlich die Transformation die folgenden Typen: Rotation, Schrägstellung, Skalierung und Verschiebung sowie Matrixtransformationsmatrix
Syntax: transform: none | 　　　　　: rotieren |. skalieren |. Matrix; Separate "),

Wenn Sie jedoch mehrere Attribute in der Transformation verwenden, müssen diese durch Leerzeichen getrennt werden. Denken Sie daran, dass sie durch Leerzeichen getrennt sind.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2D-Rotation (2D-Rotation) am Originalelement durch den angegebenen Winkelparameter, das Transformations-Ursprungsattribut muss zuerst definiert werden.
Transform-Origin definiert den Basispunkt der Drehung, wobei sich Winkel auf den Drehwinkel bezieht.
Wenn der eingestellte Wert eine positive Zahl ist, bedeutet dies eine Drehung im Uhrzeigersinn, wenn der eingestellte Wert eine negative Zahl ist, bedeutet er eine Drehung gegen den Uhrzeigersinn .
Zum Beispiel: transform:rotate(30deg):
Verschieben von Translate
Das Verschieben von Translate ist in drei Situationen unterteilt: translator(x,y) bewegt sich gleichzeitig horizontal und vertikal (d. h. die X-Achse). und die Y-Achse bewegen sich gleichzeitig); translatorX(x) bewegt sich nur in horizontaler Richtung (X-Achsen-Bewegung) translatorY(Y) bewegt sich nur in vertikaler Richtung (Y-Achsen-Bewegung)　　　　　　　　　　　　　　　　　　0　　　　[ 🛛G. Es gibt auch drei Situationen: Scale(x,y) bewirkt, dass das Element gleichzeitig horizontal und vertikal skaliert wird (d. h. die X-Achse und die Y-Achse werden gleichzeitig skaliert); Element skaliert nur horizontal (X-Achsen-Skalierung);
Das ScaleY(y)-Element skaliert nur in vertikaler Richtung (Y-Achsen-Skalierung), aber sie haben den gleichen Skalierungsmittelpunkt und die gleiche Basis,

Sein Mittelpunkt ist die Mittelposition des Elements und die Skalierungsbasis ist 1. Wenn sein Wert größer als 1 Element ist, wird das Element gleichzeitig vergrößert verformt sich entsprechend einem bestimmten Winkelwert); skewX(x) führt nur zu einer Verzerrung des Elements in horizontaler Richtung (X-Achsen-Verzerrung); Achsenverzerrung)

Matrix(, , , , ,
number>) Angabe einer 2D-Transformation in Form von Eine sechswertige Transformationsmatrix (a, b, c, d, e, f) entspricht der direkten Anwendung einer [a b c d e f]-Transformationsmatrix basierend auf der horizontalen Richtung (X-Achse). Positionieren Sie das Element in vertikaler Richtung neu (). Y-Achse) und ändern Sie den Basispunkt des Elements transform-origin. Seine Hauptfunktion besteht darin, uns zu ermöglichen, die Basispunktposition des Elements zu ändern, bevor wir die Transformationsaktion ausführen.
Da der Standardbasispunkt unseres Elements ist Seine Mittelposition, mit anderen Worten, wenn wir transform-origin nicht verwenden, um die Basispunktposition des Elements zu ändern, basieren die von der Transformation ausgeführten Operationen Drehen, Verschieben, Skalieren, Neigen, Matrix und andere auf der Mittelposition von das Element.

Beispiel: (Rotation)
> .box: hover {-webkit -transform: rotate (45deg);}

🎜>

int Hintergrund :red;margin:100px auto 0; Transition:2s;}
.box:hover{-webkit-transform:translate(-100px,200px);}

/p>
Ergebnis: Die Position des Elements ändert sich.
　　　　　.box: hover{webkit-transform:scale(2);}

> 　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　int 0px auto 0; Transition:2s; ) 🎜> Ergebnisse: Wie in der Abbildung gezeigt Figure

:80px;background:red;margin: 100px auto 0; Transition:2s;}
　　　　　　　　　.box:hover{-webkit-transform:matrix(0.5,0.38,-0.38,2,0 ,0);}

111

　　　 Ergebnis: Wie in der Abbildung gezeigt css3 过渡和2d变换—回顾