Tutorial zur Verwendung des Transformationsattributs in CSS3

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!