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
|
---
title: translate3d()
slug: Web/CSS/transform-function/translate3d()
tags:
- CSS
- Fonction
- Reference
- Transformations CSS
translation_of: Web/CSS/transform-function/translate3d()
---
<div>{{CSSRef}}</div>
<p>La fonction CSS <strong><code>translate3d()</code></strong> permet de déplacer un élément dans l'espace tridimensionnel. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent l'amplitude du déplacement pour chaque direction.</p>
<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div>
<p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">translate3d(tx, ty, tz)
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>tx</code></dt>
<dd>Une valeur de type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal).</dd>
<dt><code>ty</code></dt>
<dd>Une valeur de type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical).</dd>
<dt><code>tz</code></dt>
<dd>Une valeur de type {{cssxref("<length>")}} qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type {{cssxref("<percentage>")}}, si c'est le cas, la règle décrivant la transformation sera considérée comme invalide.</dd>
</dl>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
<th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
<th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
<th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">
<p>Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur le plan.</p>
</td>
<td colspan="1" rowspan="2">Une translation n'est pas une transformation linéaire de ℝ<sup>3</sup> et ne peut donc pas être représentée par une matrice dans le système cartésien.</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="Exemples">Exemples</h2>
<h3 id="Définir_une_translation_sur_un_seul_axe">Définir une translation sur un seul axe</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>Statique</p>
<p class="transformation">Bougé</p>
<p>Statique</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">p {
width: 60px;
height: 60px;
background-color: skyblue;
}
.transformation {
transform: perspective(500px) translate3d(10px,0px,0px);
/* equivalent to perspective(500px) translateX(10px)*/
background-color: pink;
}
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Définir_une_translation_sur_un_seul_axe","100%","250")}}</p>
<h3 id="Définir_une_translation_sur_les_axes_X_et_Z">Définir une translation sur les axes X et Z</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><p>Statique</p>
<p class="transformation">Bougé</p>
<p>Statique</p></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">p {
width: 60px;
height: 60px;
background-color: skyblue;
}
.transformation {
transform: perspective(500px) translate3d(10px,0px,100px);
background-color: pink;
}
</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Définir_une_translation_sur_les_axes_X_et_Z","100%","250")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td>
<td>{{Spec2("CSS Transforms 2")}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("transform")}}</li>
<li>{{cssxref("<transform-function>")}}</li>
</ul>
|
