Lassen Sie uns dieses Mal über das transform-Attribut sprechen, das wichtigste CSS3-Attribut, das die Formeigenschaften ändert und es dem Element ermöglicht, zwischen 2D und hin und her zu wechseln 3D.
1. 2D-Verformung
Grad stellt den Grad dar, die Einheit kann 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);
2. 3D-Verformung
Im Jahr 2013 startete Google offiziell Chrome36 Es wurde angekündigt, dass CSS in die 3D-Ära eingetreten ist.
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 die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !
Verwandte Lektüre:
Detaillierte Einführung in das Border-Image-Attribut in CSS3
Verwenden Sie JS und HTML, um ein zu erstellen einfacher Zeichenbrett-Code
Tutorial zur Verwendung des Word-Break-Attributs in CSS3
Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung des Transformationsattributs in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
