Wie verwende ich Displacement Translate() in CSS? Zusammenfassung der Übersetzungsnutzung-CSS-Tutorial-php.cn

Wie verwende ich Displacement Translate() in CSS? Zusammenfassung der Übersetzungsnutzung

云罗郡主

Freigeben： 2018-10-29 13:44:30

Original

37080 Leute haben es durchsucht

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);

Nach dem Login kopieren

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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie verwende ich Displacement Translate() in CSS? Zusammenfassung der Übersetzungsnutzung

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!