Heim >Web-Frontend >CSS-Tutorial >Welche Attribute können in CSS3 einen Schwenkeffekt erzielen?
Welche Attribute können in CSS3 einen Schwenkeffekt erzielen?
- WBOYOriginal
- 2021-12-15 10:07:584000Durchsuche
Das Attribut, das den Übersetzungseffekt in CSS3 erzielen kann, ist „transformieren“. Das Transformationsattribut kann mit der Funktion Translate() verwendet werden, um Übersetzungsoperationen für Elemente durchzuführen. Die Syntax lautet „element {transform:translate(horizontaler Übersetzungswert, vertikaler Übersetzungswert);}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Welche Attribute können den Übersetzungseffekt in CSS3 erzielen?
In CSS3 können Sie das Transformationsattribut mit der Funktion Translate () verwenden, um den Elementübersetzungseffekt zu erzielen. Das Attribut
transform wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen. Die Funktion
translate() wird verwendet, um die 2D-Transformation von Elementen zu definieren. Das ist der Effekt der Übersetzung.
Die Syntax lautet wie folgt:
元素{transform:translate(横向平移值,竖向平移值);}Das Beispiel lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
border:1px solid #000;
transform:translate(100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ausgabeergebnis:
Wenn der Transformationsstil:translate(100px,100px); nicht hinzugefügt wird
Fügen Sie die Transformation hinzu: Translate(100px,100px); Style After:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWelche Attribute können in CSS3 einen Schwenkeffekt erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!