Heim > Artikel > Web-Frontend > Was ist die Verwendung von Translate3D in CSS3?
Was ist die Verwendung von Translate3D in CSS3?
- WBOYOriginal
- 2022-02-17 16:39:125001Durchsuche
In CSS3 wird translator3d() in Verbindung mit dem Transformationsattribut verwendet, um die 3D-Transformation des Elements zu definieren. Die Syntax lautet „transform: translator3d(x, y, z)“; die Parameter repräsentieren x, y und z Achsen des Elements jeweils.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Was ist die Verwendung von Translate3d in CSS3?
Translate3d(x,y,z) wird als Wert des Transformationsattributs verwendet, um die 3D-Transformation zu definieren. Das Attribut
transform wendet eine 2D- oder 3D-Transformation auf das Element an
Die Syntax lautet:
tranform: translate3d(x,y,z)
Die Bedeutung dieser drei Parameter:
transform: translatorX(100px): nur auf der x-Achse verschieben
transform: translatorY (100px) : Nur auf der y-Achse verschieben
transform: translatorZ(100px) : Nur auf der z-Achse verschieben
transform: translator3d(x,y,z) : xyz repräsentieren jeweils den Abstand in Richtung des Zu bewegende Achse
Beispiele sind 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:hover {
transform:translate3d(8px,8px,0);
}
.div {
width:100px;
height:80px;
background-color: pink;
}
</style>
<head>
<body>
<div class="div"></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Translate3D in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!
- Lassen Sie uns über die automatische Konvertierung von px in rem durch das Postcss-Plug-in sprechen
- Eine eingehende Analyse des kaskadierenden Kontexts in CSS
- Analysieren Sie kurz die 5 Entwurfsmuster in CSS und sprechen Sie über die Rolle des CSS-Verzeichniscodes im Vue-Projekt
- Was ist der Unterschied zwischen PHP und CSS?