Heim > Artikel > Web-Frontend > So verwenden Sie das CSS-Transformationsattribut
So verwenden Sie das CSS-Transformationsattribut
- 藏色散人Original
- 2019-05-30 09:31:013870Durchsuche
Die CSS-Transformationseigenschaft wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen. Die Syntax lautet transform: none|transform-functions.
Wie verwende ich das CSS-Transformationsattribut?
Funktion: Das Transformationsattribut wendet eine 2D- oder 3D-Transformation auf das Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.
Syntax:
transform: none|transform-functions
Beschreibung:
● keine Die Definition wird nicht konvertiert.
● Matrix(n,n,n,n,n,n) Definieren Sie die 2D-Transformation unter Verwendung einer Matrix aus sechs Werten.
● matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Definieren Sie die 3D-Transformation unter Verwendung einer 4x4-Matrix mit 16 Werten .
● translator(x,y) 2D-Transformation definieren.
● translator3d(x,y,z) 3D-Transformation definieren.
● translatorX(x) Definieren Sie die Transformation, indem Sie einfach den Wert der X-Achse verwenden.
● translatorY(y) Definieren Sie die Transformation, indem Sie einfach den Y-Achsenwert verwenden.
● Translatedz (Z) definiert die 3D-Konvertierung, verwendet jedoch nur den Wert der Z-Achse. ● scale(x,y) Definition der 2D-Skalierungstransformation. ● scale3d(x,y,z) definiert die 3D-Skalierungstransformation. ● scaleX(x) Definieren Sie die Skalierungstransformation, indem Sie den Wert der X-Achse festlegen. ● scaleY(y) Definieren Sie die Skalierungstransformation, indem Sie den Wert der Y-Achse festlegen. ● scaleZ(z) Definiert die 3D-Skalierungstransformation durch Festlegen des Werts der Z-Achse. ● Drehen (Winkel) Definieren Sie die 2D-Rotation und geben Sie den Winkel im Parameter an. ● rotate3d(x,y,z,angle) Definieren Sie die 3D-Rotation. ●rotateX(angle) Definiert eine 3D-Rotation entlang der X-Achse. ●rotateY(angle) Definiert die 3D-Rotation entlang der Y-Achse. ●rotateZ(angle) Definiert eine 3D-Rotation entlang der Z-Achse. ● skew(x-angle,y-angle) Definiert eine 2D-Skew-Transformation entlang der X- und Y-Achse. ● skewX(angle) Definiert die 2D-Skew-Transformation entlang der X-Achse. ● skewY(angle) Definiert die 2D-Skew-Transformation entlang der Y-Achse. ● perspective(n) Definiert die perspektivische Ansicht für das 3D-Transformationselement.Hinweis:
Internet Explorer 10, Firefox und Opera unterstützen das Transformationsattribut. Internet Explorer 9 unterstützt ein alternatives -ms-transform-Attribut (nur für 2D-Transformationen). Safari und Chrome unterstützen alternative -webkit-transform-Eigenschaften (3D- und 2D-Transformationen). Opera unterstützt nur die 2D-Konvertierung.Beispiel für die Verwendung des CSS-Transformationsattributs
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>Effektausgabe:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Transformationsattribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!