So verwenden Sie das CSS-Transformationsattribut-Front-End-Fragen und Antworten-php.cn

So verwenden Sie das CSS-Transformationsattribut

藏色散人

Freigeben： 2019-05-30 09:31:01

Original

3921 Leute haben es durchsucht

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.

So verwenden Sie das CSS-Transformationsattribut

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Effektausgabe:

So verwenden Sie das CSS-Transformationsattribut

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!