Web-FrontendCSS-TutorialWie verwende ich Displacement Translate() in CSS? Zusammenfassung der ÜbersetzungsnutzungWie verwende ich Displacement Translate() in CSS? Zusammenfassung der Übersetzungsnutzung
Wie verwende ich die Übersetzung in CSS3? Wie verwende ich Displacement Translate() in CSS? Dies können Probleme sein, auf die einige Anfänger beim Erlernen von CSS stoßen. Als nächstes erklären wir, wie man Displacement Translate() in CSS verwendet.
1: Verwendung von Translate()
In CSS-Stilen verwenden viele Leute gerne Translate(), um die Verschiebung darzustellen. Sie können x und y in Translate() verwenden, um die horizontale Position von darzustellen das Element vertikal oder horizontal verschieben.
Zum Beispiel: 1.translateY(y): Zeigt an, dass sich das Element in der vertikalen Richtung bewegt, die wir als y-Achse bezeichnen
2.translateX(x): Zeigt das an Das Element bewegt sich horizontal. Bewegen Sie sich in die Richtung, die wir als x-Achse bezeichnen.
2: Translate()-Syntax
transform:translateX(x);或者transform:translateY(y);
In CSS3 gehört die Transformationsmethode des Transformationsattributs zu transform , und transform müssen hinzugefügt werden, um den Verformungsprozess anzuzeigen. Die Einheiten der Entfernung, um die sich das Element in horizontaler Richtung bewegt, werden in px und in Prozent ausgedrückt. Wenn x ein positiver Wert zu sein scheint, bedeutet dies, dass sich das Element in die horizontale Richtung bewegt hat rechts in horizontaler Richtung. Wenn x ein negativer Wert ist, bedeutet dies, dass sich das Element nach rechts bewegt,
Zum Beispiel:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3位移translate()方法</title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:translateX(50px);
-webkit-transform:translateX(20px); /*兼容-webkit-引擎浏览器*/
-moz-transform:translateX(20px); /*兼容-moz-引擎浏览器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>Der Effekt ist wie folgt:
Zusammenfassung: transform:translateX(50px) gibt eine Bewegung in horizontaler Richtung um 50 Pixel an. Wenn wir zu diesem Zeitpunkt 50 Pixel in -50 Pixel ändern, bewegt sich das Element um 50 Pixel in die entgegengesetzte Richtung horizontal.
Verwendung von Translate(y):
Die Verwendung von Translate(y) ist der Verwendung von Translate(x) sehr ähnlich. x bewegt sich in horizontaler Richtung und y bewegt sich in vertikaler Richtung Wenn
y einen positiven Wert hat, bedeutet dies, dass sich das Element nach unten bewegt. Wenn ein negativer Wert angezeigt wird, bedeutet dies, dass es sich nach oben bewegt, was unserem normalen Denken widerspricht. Gemischte Verwendung von
translate(x,y):
gibt an, dass sich das Element in horizontaler Richtung in x bewegt. Hierbei ist zu beachten, dass der y-Wert ein Parameter ist Wenn der Wert nicht festgelegt ist, kann dies darauf hinweisen, dass sich das Element auf der x-Achse bewegt. Tatsächlich macht die einfache Verwendung von Translate() nicht viel Sinn. Wir können es in Verbindung mit CSS verwenden.
Wie verwende ich Displacement Translate() in CSS? Eine vollständige Einführung in die Zusammenfassung der Übersetzungsverwendung. Wenn Sie mehr über das CSS-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.
Das obige ist der detaillierte Inhalt vonWie verwende ich Displacement Translate() in CSS? Zusammenfassung der Übersetzungsnutzung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So viele FarblinksApr 13, 2025 am 11:36 AMEs gab in letzter Zeit eine Reihe von Werkzeugen, Artikeln und Ressourcen über Farbe. Bitte erlauben Sie mir, ein paar Registerkarten zu schließen, indem Sie sie hier für Ihren Vergnügen zusammenrunden.
Wie automatische Margen in Flexbox funktionierenApr 13, 2025 am 11:35 AMRobin hat dies schon einmal abgedeckt, aber ich habe in den letzten Wochen einige Verwirrung darüber gehört und gesehen, wie eine andere Person einen Stich gemacht hat, um es zu erklären, und ich wollte
Bewegliche Regenbogen unterstreichtApr 13, 2025 am 11:27 AMIch liebe das Design der Sandwich -Site. Unter vielen schönen Merkmalen befinden sich diese Schlagzeilen mit Regenbogenuntergründen, die sich beim Scrollen bewegen. Es ist nicht
Neues Jahr, neuer Job? Lassen Sie einen netzbetriebenen Lebenslauf machen!Apr 13, 2025 am 11:26 AMViele beliebte Lebenslaufdesigns machen den verfügbaren Seitenraum optimal, indem sie Abschnitte in Gitterform legen. Verwenden wir ein CSS -Netz, um ein Layout zu erstellen, das
Eine Möglichkeit, die Benutzer aus der Gewohnheit herauszubrechen, zu viel neu zu ladenApr 13, 2025 am 11:25 AMSeiten -Nachladen sind eine Sache. Manchmal aktualisieren wir eine Seite, wenn wir der Meinung sind, dass sie nicht mehr reagiert, oder glauben, dass neue Inhalte verfügbar sind. Manchmal sind wir nur sauer auf
Domänengetriebenes Design mit ReactApr 13, 2025 am 11:22 AMEs gibt nur sehr wenige Anleitungen zur Organisation von Front-End-Anwendungen in der Welt der Reaktionen. (Bewegen Sie einfach Dateien um, bis es sich „richtig anfühlt“, lol). Die Wahrheit
Erkennen inaktiver BenutzerApr 13, 2025 am 11:08 AMMeistens kümmert es Sie sich nicht wirklich darum, ob ein Benutzer aktiv mit Ihrer Anwendung inaktiv oder vorübergehend inaktiv ist. Inaktiv, was vielleicht sie vielleicht
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo war immer großartig bei Integrationen. Sie haben Integrationen mit bestimmten Apps wie Kampagnenmonitor, MailChimp und Typkit, aber auch sie
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Dreamweaver Mac
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
