recursal/MDN huggingface dataset:
Empilement sans z-index
=======================

* Aperçu : Comprendre z-index
* Suivant
Empilement sans `z-index`
-------------------------

Lorsqu'aucun élément n'a de `z-index` définis, tous les éléments sont empilés dans cet ordre (de bas en haut) :

1. Arrière-plans et bordures de l'élément racine
2. Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)
3. Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)

On gardera à l'esprit que, lorsque la propriété `order` modifie l'ordre visuel des conteneurs flexibles (`flex`), cela modifie également l'ordre du contexte d'empilement.

Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.

**Note :**

* Dans un groupe d'éléments sans aucune propriété `z-index`, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.
* Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.
* **Attention** : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.

Exemple
-------

### HTML


```html
<div id="abs1" class="absolute"><b>DIV #1</b><br />position: absolute;</div>
<div id="rel1" class="relative"><b>DIV #2</b><br />position: relative;</div>
<div id="rel2" class="relative"><b>DIV #3</b><br />position: relative;</div>
<div id="abs2" class="absolute"><b>DIV #4</b><br />position: absolute;</div>
<div id="sta1" class="static"><b>DIV #5</b><br />position: static;</div>
```

### CSS


```css
b {
  font-family: sans-serif;
}

div {
  padding: 10px;
  border: 1px dashed;
  text-align: center;
}

.static {
  position: static;
  height: 80px;
  background-color: #ffc;
  border-color: #996;
}

.absolute {
  position: absolute;
  width: 150px;
  height: 350px;
  background-color: #fdd;
  border-color: #900;
  opacity: 0.7;
}

.relative {
  position: relative;
  height: 80px;
  background-color: #cfc;
  border-color: #696;
  opacity: 0.7;
}

#abs1 {
  top: 10px;
  left: 10px;
}

#rel1 {
  top: 30px;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  top: 15px;
  left: 20px;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  top: 10px;
  right: 10px;
}

#sta1 {
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}
```

* Aperçu : Comprendre z-index
* Suivant
Les sprites CSS
===============

Les *sprites* sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors `background-position` pour choisir l'image qu'on souhaite utiliser.

**Note :** Avec HTTP/2, il peut être plus judicieux d'utiliser de nombreuses « petites » requêtes.

Implémentation
--------------

Supposons qu'une image est affichée pour chaque élement de la classe `toolbtn` :


```css
.toolbtn {
  background: url("myfile.png");
  display: inline-block;
  height: 20px;
  width: 20px;
}
```


Une position peut être ajoutée avec les valeurs x et y après `url()` pour décaler l'image de fond (`background`). Cela fonctionne aussi avec `background-position`. Par exemple :


```css
#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}
```


L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe `toolbtn`).

De la même manière, vous pouvez faire un effet de transition au survol :


```css
#btn:hover {
  background-position: <pixels shifted right>px <pixels shifted down>px;
}
```

Voir aussi
----------

* Une démonstration sur CSS Tricks
rotateZ()
=========

La fonction **`rotateZ()`** définit une transformation qui déplace l'élément autour de l'axe Z, sans déformer cet élément. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.

Exemple interactif
------------------

L'axe de la rotation passe par l'origine du repère, définie par la propriété `transform-origin`.

`rotateZ(a)` est une notation raccourcie équivalente à `rotate3D(0, 0, 1, a)`.

**Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.

Syntaxe
-------

L'angle de la rotation appliquée par `rotateZ()` est fourni par une valeur `<angle>`. Si cette valeur est positive, la rotation s'effectuera dans le sens horaire ; si elle est négative, la rotation s'effectuera dans le sens anti-horaire.


```css
rotateZ(a)
```

### Valeurs

`a`

Une valeur de type `<angle>` qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.



| Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
| --- | --- | --- | --- |
| 
 Cette transformation s'applique dans l'espace (3D) et ne peut pas être
 représentée en deux dimensions.
  | 

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 | 

cos(a)
-sin(a)
0
0

sin(a)
cos(a)
0
0

0
0
1
0

0
0
0
1

 |

Exemples
--------

### HTML


```html
<div>Normal</div>
<div class="rotated">Tourné</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateZ(45deg);
  background-color: pink;
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotatez |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `transform`
* `<transform-function>`
skewX()
=======

La fonction **`skewX()`** permet d'opérer une distorsion horizontale en étirant chaque point de l'élément d'un certain angle dans la direction horizontale. Pour cela, on augmente l'abscisse d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.

Exemple interactif
------------------

La valeur obtenue par cette fonction est de type `<transform-function>`.

`skewX(a)` est équivalent à `skew(a)`.

Syntaxe
-------


```css
skewX(a)
```

### Valeurs

`a`

Une valeur de type `<angle>` qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).



| Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
| --- | --- | --- | --- |
| 

1
 tan(ay)

0
 1

 | 

1
 tan(ay)
0

0
 1
0

0
0
1

 | 

1
 tan(ay)
0

0
 1
0

0
0
1

 | 

1
 tan(ay)
0
0

0
 1
0
0

0
0
1
0

0
0
0
1

 |
| `[1 0 tan(a) 1 0 0]` |

Exemples
--------

### HTML


```html
<div>Normal</div>
<div class="skewed">Distordu</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewX(10deg); /\* Équivalent à skew(10deg) \*/
  background-color: pink;
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skewx |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `transform`
* `<transform-function>`
scaleX()
========

La fonction **`scaleX()`** permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés.

![](/fr/docs/Web/CSS/transform-function/scaleX/scalex.png)

`scaleX(sx)` est une notation raccourcie équivalente à `scale(sx, 1)` ou à `scale3d(sx, 1, 1)`.

`scaleX(-1)` définit une symétrie axiale par rapport à un axe vertical passant par l'origine du repère (définie grâce à la propriété `transform-origin`).

Syntaxe
-------


```css
scaleX(s)
```

### Valeurs

`s`

Une valeur de type `<number>` qui représente le facteur d'échelle de l'homothétie.



| Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
| --- | --- | --- | --- |
| 

s
0

0
1

 | 

s
 0
0

0
 1
0

0
0
1

 | 

s
 0
0

0
 1
0

0
0
1

 | 

s
 0
0
0

0
 1
0
0

0
0
1
0

0
0
0
1

 |
| `[s 0 0 1 0 0]` |

Exemples
--------

### Origine inchangée

#### HTML


```html
<div>Normal</div>
<div class="scaled">Mis à l'échelle</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}
```


#### Résultat

### Origine déplacée

#### HTML


```html
<div>Normal</div>
<div class="scaled">Mis à l'échelle</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  transform-origin: left;
  background-color: pink;
}
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scalex |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `scaleY()`
* `scaleZ()`
* `transform`
* `<transform-function>`
* `transform-origin`
scaleY()
========

La fonction **`scaleY()`** modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type `<transform-function>`.

![](/fr/docs/Web/CSS/transform-function/scaleY/scaley.png)

`scaleY(sy)` est une notation raccourcie équivalente à `scale(1, sy)` ou à `scale3d(1, sy, 1)`.

`scaleY(-1)` définit une symétrie axiale selon un axe horizontal, passant par l'origine du repère (cette origine est définie grâce à la propriété `transform-origin`).

Syntaxe
-------


```css
scaleY(s)
```

### Valeurs

`s`

Une valeur de type `<number>` qui indique le facteur d'échelle pour l'homothétie.



| Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
| --- | --- | --- | --- |
| 

1
 0

0
s

 | 

1
 0
0

0
 s
0

0
0
1

 | 

1
 0
0

0
 s
0

0
0
1

 | 

1
 0
0
0

0
 s
0
0

0
0
1
0

0
0
0
1

 |
| `[1 0 0 s 0 0]` |

Exemples
--------

### HTML


```html
<div>Normal</div>
<div class="scaled">Mis à l'échelle</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleY(0.6);
  background-color: pink;
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scaley |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `scaleX()`
* `scaleZ()`
* `transform`
* `<transform-function>`
* `transform-origin`
skew()
======

La fonction **`skew()`** permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine, plus le décalage obtenu sera important.

Exemple interactif
------------------

La valeur obtenue par cette fonction est de type `<transform-function>`.

Syntaxe
-------

La fonction `skew()` s'utilise avec une ou deux valeurs qui représente l'intensité de la distorsion appliquée dans chaque direction. Si une seule valeur est fournie, elle sera utilisée pour la distorsion sur l'axe horizontal et il n'y aura pas de distorsion verticale.


```css
skew(ax)

skew(ax, ay)
```

### Valeurs

`ax`

Une valeur de type `<angle>` qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).

`ay`

Une valeur de type `<angle>` qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).



| Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
| --- | --- | --- | --- |
| 

1
 tan(ax)

tan(ay)
 1

 | 

1
 tan(ax)
0

tan(ay)
 1
0

0
0
1

 | 

1
 tan(ax)
0

tan(ay)
 1
0

0
0
1

 | 

1
 tan(ax)
0
0

tan(ay)
 1
0
0

0
0
1
0

0
0
0
1

 |
| `[1 tan(ay) tan(ax) 1 0 0]` |

Exemples
--------

### Utiliser une distorsion horizontale

#### HTML


```html
<div>Normal</div>
<div class="skewed">Distordu</div>
```


#### CSS


```css
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /\* Équivalent à skewX(10deg) \*/
  background-color: pink;
}
```


#### Résultat

### Utiliser deux angles

#### HTML


```html
<div>Normal</div>
<div class="skewed">Distordu</div>
```


#### CSS


```css
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skew |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `transform`
* `<transform-function>`
* `skewX()`
* `skewY()`
translateZ()
============

La fonction **`translateZ()`** permet de déplacer un élément selon l'axe z de l'espace tridimensionnel. Cette transformation est caractérisée par une valeur de longueur (type `<length>`) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type `<transform-function>`.

Exemple interactif
------------------

`translateZ(tz)` est un raccourci équivalent à `translate3d(0, 0, tz)`.

Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée afin de créer un espace en trois dimensions et `transform-style: preserve-3d` permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D.

Syntaxe
-------


```css
translateZ(tz)
```

### Valeurs

`t`

Une valeur de type `<length>` qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type `<percentage>`, si c'est le cas, la propriété qui contient la transformation est considérée comme invalide.



| Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
| --- | --- | --- | --- |
| 
 Cette transformation s'applique en trois dimensions et ne peut donc être
 représentée sur un plan.
  | 
 Une translation n'est pas une transformation linéaire sur ℝ3
 et ne peut donc pas être représentée avec une matrice dans le système
 cartésien.
  | 

1
 0
0
0

0
 1
0
0

0
0
1
t

0
0
0
1

 |

Exemples
--------

### HTML


```html
<div>Statique</div>
<div class="moved">Déplacé</div>
```

### CSS


```css
div {
  position: relative;
  width: 60px;
  height: 60px;
  left: 100px;
  background-color: skyblue;
}

.moved {
  /\* On ajoute une perspective pour créer un \*/
  /\* espace 3D. L'utilisateur regarde « depuis »\*/
  /\* 500px et on avance l'élément vers l'utili- \*/
  /\* sateur de 200px \*/
  transform: perspective(500px) translateZ(200px);
  background-color: pink;
}
```

### Résultat

Si la valeur fournie à `perspective()` est inférieure à l'argument de `translateZ()` (ex. `transform: perspective(200px) translateZ(300px);`), l'élément transformé ne sera pas visible, car il sera situé au-delà de l'espace projeté sur l'écran. Plus l'écart entre ces deux arguments est faible, plus l'élément paraîtra proche de l'utilisateur.

Spécifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-translatez |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `<transform-function>`
* Les transformations CSS
* `transform`
* `translateX()` et `translateY()`
translate3d()
=============

La fonction CSS **`translate3d()`** 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.

Exemple interactif
------------------

La valeur obtenue par cette fonction est de type `<transform-function>`.

Syntaxe
-------


```css
translate3d(tx, ty, tz)
```

### Valeurs

`tx`

Une valeur de type `<length>` ou `<percentage>` qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal).

`ty`

Une valeur de type `<length>` ou `<percentage>` qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical).

`tz`

Une valeur de type `<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 `<percentage>`, si c'est le cas, la règle décrivant la transformation sera considérée comme invalide.



| Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
| --- | --- | --- | --- |
| 
 Cette transformation s'applique en trois dimensions et ne peut donc
 être représentée sur le plan.
  | 
 Une translation n'est pas une transformation linéaire de ℝ3
 et ne peut donc pas être représentée par une matrice dans le système
 cartésien.
  | 

1
 0
0
tx

0
 1
0
ty

0
0
1
tz

0
0
0
1

 |

Exemples
--------

### Définir une translation sur un seul axe

#### HTML


```html
<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translate3d(10px, 0px, 0px);
  /\* Équivalent à perspective(500px) translateX(10px)\*/
  background-color: pink;
}
```


#### Résultat

### Définir une translation sur les axes X et Z

#### HTML


```html
<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translate3d(10px, 0, 100px);
  background-color: pink;
}
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-translate3d |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `transform`
* `<transform-function>`
skewY()
=======

La fonction (en-US) CSS **`skewY()`** permet d'opérer une distorsion verticale en étirant chaque point de l'élément d'un certain angle dans la direction verticale. La valeur obtenue par cette fonction est de type `<transform-function>`.

Exemple interactif
------------------

Cette transformation est une transvection dans laquelle on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.

Syntaxe
-------


```css
skewY(a)
```

### Valeurs

`a`

Une valeur de type `<angle>` qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).



| Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
| --- | --- | --- | --- |
| 

(

1

0

tan
(
a
)

1

)

 | 

(

1

0

0

tan
(
a
)

1

0

0

0

1

)

 | 

(

1

0

0

tan
(
a
)

1

0

0

0

1

)

 | 

(

1

0

0

0

tan
(
a
)

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 tan(a) 0 1 0 0]` |

Exemples
--------

### HTML


```html
<div>Normal</div>
<div class="skewed">Distordu</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewY(40deg);
  background-color: pink;
}
```

### Résultat

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skewy |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `transform`
* `<transform-function>`
translateX()
============

La fonction CSS **`translateX()`** permet d'appliquer une translation en 2D. La valeur obtenue sera du type `<transform-function>`.

![](/fr/docs/Web/CSS/transform-function/translateX/transform-functions-translatex_2.png)

**Note :** `translateX(tx)` est équivalent à `translate(tx, 0)` ou `translate3d(tx, 0, 0)`.

Syntaxe
-------


```css
/\* Valeurs de type <length-percentage> \*/
transform: translateX(200px);
transform: translateX(50%);
```

### Values

`<length-percentage>`

Une valeur exprimant une longueur (type `<length>`) ou un pourcentage (`<percentage>`) qui représente la composante horizontale du vecteur de translation. Lorsque la valeur est un pourcentage, elle est relative à la largeur de la boîte de référence définie par la propriété `transform-box`.



| Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 |
| --- | --- | --- | --- |
| Une translation n'étant pas une transformation linéaire pour ℝ2, elle ne peut pas être représentée par une matrice avec des coordonnées cartésiennes. | 

1

0

t

0

1

0

0

0

1

 | 

1

0

t

0

1

0

0

0

1

 | 

1

0

0

t

0

1

0

0

0

0

1

0

0

0

0

1

 |
| `[1 0 0 1 t 0]` |

### Syntaxe formelle


```css
translateX([`<length-percentage>`](/fr/docs/Web/CSS/length-percentage))
```

Exemples
--------

### HTML


```html
<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>
```

### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateX(10px); /\* Équivalent à translate(10px) \*/
  background-color: pink;
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translatex |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `translate()`
* `translateY()`
* `transform`
* `<transform-function>`