Heim > Artikel > Web-Frontend > Ist Translate eine CSS3-Eigenschaft?

Ist Translate eine CSS3-Eigenschaft?

WBOYOriginal: 2022-06-23 15:47:422389Durchsuche

translate ist ein neues CSS-Attribut von CSS3; das Translate-Attribut wird verwendet, um die 2D-Transformationstransformation des Elements zu definieren. Dieses Attribut wird häufig in Verbindung mit dem Transformationsattribut verwendet . Die Syntax lautet „transform:translate(Translationsabstand in Richtung der x-Achse, Translationsabstand in Richtung der y-Achse)“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

translate ist eine CSS3-Eigenschaft.

transform-Eigenschaft wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

translate(x,y) definiert die 2D-Transformation.

Die Syntax lautet wie folgt: Die Funktion

transform:translate(<translation-value>[, <translation-value>]);

translate() kann Elemente verschieben.

Wert:

translate([, ]); bedeutet das gleichzeitige Verschieben des Elements auf der X-Achse und der Y-Achse, . Enthält zwei Parameter. Wenn der zweite Parameter weggelassen wird, ist der zweite Parameter 0. Wenn der Parameter negativ ist, bedeutet dies, dass er sich in die entgegengesetzte Richtung bewegt.

translateX(); bedeutet, dass das Element nur in der X-Achse (horizontale Richtung) verschoben wird.

translateY(); bedeutet, dass das Element nur in der Y-Achse (vertikale Richtung) verschoben wird.

translateZ(); bedeutet, dass das Element nur auf der Z-Achse verschoben wird, sofern für das Element selbst oder das übergeordnete Element des Elements ein perspektivischer Wert festgelegt ist.

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  transform: translate(50px,100px); /* 标准语法 */
}
</style>
</head>
<body>
<h1>translate() 方法</h1>
<p>translate() 方法从元素当前位置对其进行移动：</p>
<div>
该 div 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素。
</div>
</body>
</html>

Ausgabeergebnis:

Ist Translate eine CSS3-Eigenschaft?

(Freigabe von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonIst Translate eine CSS3-Eigenschaft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 html transform

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ist Float eine neue Funktion von CSS3?Nächster Artikel：Ist Float eine neue Funktion von CSS3?

In Verbindung stehende Artikel

Mehr sehen