1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: translate3d()
slug: Web/CSS/transform-function/translate3d()
tags:
- CSS
- CSS Funktion
- CSS Transformation
- Funktion
- Referenz
translation_of: Web/CSS/transform-function/translate3d()
---
<div>{{CSSRef}}</div>
<p>Die <a href="/de/docs/Web/CSS">CSS</a>-Eigenschaften <strong><code>translate3d()</code></strong> positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein {{cssxref("<Transform-Funktion>")}} Datentyp.</p>
<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div>
<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
<p>Diese Transformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten legen fest, wie sehr sich das Element in jede Richtung bewegt.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox notranslate">translate3d(<var>tx</var>, <var>ty</var>, <var>tz</var>)
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code><var>tx</var></code></dt>
<dd>Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Abszisse des Verschiebungsvektors darstellt.</dd>
<dt><code><var>ty</var></code></dt>
<dd>Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Ordinate des Verschiebevektors darstellt.</dd>
<dt><code><var>tz</var></code></dt>
<dd>Ist ein {{cssxref("<Länge>")}}, der die z-Komponente des Verschiebungsvektors darstellt.<br>
Es kann kein {{cssxref("<Prozentwert>")}}-Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet.</dd>
</dl>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Kartesische Koordinaten auf ℝ<sup>2</sup></th>
<th scope="col">Homogene Koordinaten auf ℝℙ<sup>2</sup></th>
<th scope="col">Kartesische Koordinaten auf ℝ<sup>3</sup></th>
<th scope="col">Homogene Koordinaten auf ℝℙ<sup>3</sup></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">
<p>Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.</p>
</td>
<td colspan="1" rowspan="2">Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.</td>
<td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
</tr>
</tbody>
</table>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Using_a_single_axis_translation" name="Using_a_single_axis_translation">Verwendung einer einachsigen Verschiebung</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div>Static</div>
<div class="moved">Moved</div>
<div>Static</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
/* Equivalent to perspective(500px) translateX(10px) */
transform: perspective(500px) translate3d(10px, 0, 0px);
background-color: pink;
}
</pre>
<h4 id="Ergebnis">Ergebnis</h4>
<p>{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}</p>
<h3 id="Combining_z-axis_and_x-axis_translation" name="Combining_z-axis_and_x-axis_translation">Kombinierte Z-Achsen- und X-Achsen-Verschiebung</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><div>Static</div>
<div class="moved">Moved</div>
<div>Static</div></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate">div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translate3d(10px, 0, 100px);
background-color: pink;
}
</pre>
<h4 id="Ergebnis_2">Ergebnis</h4>
<p>{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}</p>
<h2 id="Spezifikation">Spezifikation</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td>
<td>{{Spec2("CSS Transforms 2")}}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
<p>{{Compat("css.types.transform-function")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{cssxref("translate")}}</li>
<li><code><a href="/de/docs/Web/CSS/transform-function/translateY()">translateY()</a></code></li>
<li><code><a href="/de/docs/Web/CSS/transform-function/translateX">translateX()</a></code></li>
<li>{{cssxref("transform")}}</li>
<li>{{cssxref("<transform-function>")}}</li>
</ul>
|
