Ist Translate eine CSS3-Eigenschaft?-Front-End-Fragen und Antworten-php.cn

Ist Translate eine CSS3-Eigenschaft?

WBOY

Freigeben： 2022-06-23 15:47:42

Original

2413 Leute haben es durchsucht

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)“.

Ist Translate eine CSS3-Eigenschaft?

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!