recursal/MDN huggingface dataset:
rotate()
========

La fonction **`rotate()`** définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété `transform-origin`) sans le déformer (autrement dit, qui applique une rotation plane). C'est une rotation autour de ce point. Par défaut, cette origine correspond au centre de l'élément.

La rotation plane est définie par un angle, l'argument de 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. La valeur obtenue par cette fonction est de type `<transform-function>`.

Syntaxe
-------

L'angle de la rotation créée grâce à `rotate()` est fourni comme argument à cette fonction via une aleur de type `<angle>`. Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre.


```css
rotate(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 |
| --- | --- | --- | --- |
| 

cos(a)
-sin(a)

sin(a)
cos(a)

 | 

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 | 

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

 |
| `[cos(a) sin(a) -sin(a) cos(a) 0 0]` |

Exemples
--------

### Exemple simple

#### CSS


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

.tourne {
  transform: rotate(45deg); /\* Équivalent à rotateZ(45deg) \*/
  background-color: pink;
}
```


#### HTML


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


#### Résultat

### Associer une rotation à une autre transformation

Lorsqu'on applique plusieurs transformations, il faut faire attention à l'ordre dans lequel elles sont appliquées. Ainsi, si on applique une rotation avant une translation, la translation se fera selon le nouvel axe de rotation !

#### CSS


```css
div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}
```


#### HTML


```html
<div>Normal</div>
<div class="rotate">Tourné</div>
<div class="rotate-translate">Tourné puis translaté</div>
<div class="translate-rotate">Translaté puis tourné</div>
```


#### Résultat

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

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

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

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

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

* `transform`
* `<transform-function>`
* `rotate3d()`
rotateY()
=========

La fonction **`rotateY()`** définit une rotation, qui déplace l'élément autour de l'axe des ordonnées, sans le déformer. 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`.

`rotateY(a)` est une notation raccourcie, équivalente à `rotate3D(0, 1, 0, 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 `rotateY()` 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
rotateY(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)
0
sin(a)

0
1
0

-sin(a)
0
cos(a)

 | 

cos(a)
0
sin(a)
0

0
1
0
0

-sin(a)
0
cos(a)
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: rotateY(60deg);
  background-color: pink;
}
```

### Résultat

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

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

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

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

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

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

La fonction **`translateY()`** permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type `<length>`) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type `<transform-function>`.

![](/fr/docs/Web/CSS/transform-function/translateY/translatey.png)

`translateY(ty)` est une notation raccourcie équivalente à `translate(0, ty)`.

Syntaxe
-------


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

### Valeurs

`t`

Une valeur de type `<length>` qui représente l'ordonnée du vecteur de translation (la composante en Y).



| Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
| --- | --- | --- | --- |
| 
 Une translation n'est pas une transformation linéaire sur ℝ2
 et on ne peut donc pas la représenter en utilisant une matrice
 exprimée dans le système cartésien.
  | 

1
 0
0

0
 1
t

0
0
1

 | 

1
 0
0

0
 1
t

0
0
1

 | 

1
 0
0
0

0
 1
0
t

0
0
1
0

0
0
0
1

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

### Syntaxe formelle


```css
translateY([`<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: translateY(10px);
  background-color: pink;
}
```

### Résultat

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

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

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

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

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

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

La fonction **`translate()`** permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical).

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

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

Syntaxe
-------


```css
/\* Avec une seule valeur <length-percentage> \*/
transform: translate(200px);
transform: translate(50%);

/\* Avec deux valeurs <length-percentage> \*/
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
```

### Valeurs

Avec une seule valeur `<length-percentage>`

Cette valeur est de type `<length>` ou `<percentage>` et représente l'abscisse (la coordonnée horizontale) du vecteur de translation. La composante verticale du vecteur de translation sera nulle. Ainsi, `translate(2px)` est équivalent à `translate(2px, 0)`. Une valeur en pourcentage sera relative à la largeur de la boîte de référence définie par la propriété `transform-box`.

Avec deux valeurs `<length-percentage>`

Ces valeurs sont de type `<length>` ou `<percentage>` et décrivent respectivement l'abscisse (la coordonnée horizontale) et l'ordonnée (la coordonnée verticale) du vecteur de translation. Un premier pourcentage sera relatif à la largeur de la boîte de référence et un deuxième pourcentage sera relatif à sa hauteur (la boîte de référence étant 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 ℝ3 | Coordonnées homogènes sur ℝℙ3 |
| --- | --- | --- | --- |
| 
 Une translation plane n'est pas une transformation linéaire de ℝ2
 et ne peut donc pas être représentée sous la forme d'une matrice dans
 le système cartésien.
  | 

1
 0
tx

0
 1
ty

0
0
1

 | 

1
 0
tx

0
 1
ty

0
0
1

 | 

1
 0
0
tx

0
 1
0
ty

0
0
1
0

0
0
0
1

 |
| `[1 0 0 1 tx ty]` |

Exemples
--------

### Définir une translation horizontale

#### 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 {
  /\* Équivalent à : translateX(10px) ou translate(10px, 0) \*/
  transform: translate(10px);
  background-color: pink;
}
```


#### Résultat

### Définir une translation sur les deux axes

#### 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: translate(10px, 10px);
  background-color: pink;
}
```


#### Résultat

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

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

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

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

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

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

La fonction **`scale3d()`** permet de modifier la taille d'un élément en appliquant une homothétie définie par un vecteur. Les composantes de ce vecteur permettent d'appliquer des échelles différentes selon les différentes dimensions.

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

La transformation appliquée est définie par un vecteur dont les coordonnées définissent l'amplitude de l'homothétie dans chaque direction. Si les trois coordonnées du vecteur sont égales, la transformation est isotropique et la forme de l'élément est conservée.

Lorsque les composantes du vecteur sont en dehors de l'intervalle `[-1, 1]`, la transformation agrandit l'élément dans le sens des coordonnées. Lorsque les composantes sont dans cet intervalle, cela réduit l'élément.

Syntaxe
-------

La fonction `scale3d()` s'utilise avec trois valeurs dont chacune représente l'intensité de la transformation selon chaque direction.


```css
scale3d(sx, sy, sz)
```

### Valeurs

`sx`

Une valeur de type `<number>` qui représente l'abscisse du vecteur définissant l'homothétie.

`sy`

Une valeur de type `<number>` qui représente l'ordonnée du vecteur définissant l'homothétie

`sz`

Une valeur de type `<number>` qui représente la composante, selon l'axe Z, du vecteur définissant 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 |
| --- | --- | --- | --- |
| 
 Cette transformation s'applique dans en 3 dimensions et ne peut pas être
 représentée sur le plan.
  | 

sx
 0
0

0
 sy
0

0
0
sz

 | 

sx
 0
0
0

0
 sy
0
0

0
0
sz
0

0
0
0
1

 |

Exemples
--------

### Avec origine non modifié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: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  background-color: pink;
}
```


#### Résultat

### Avec origine translaté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: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: pink;
}
```


#### Résultat

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

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

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

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

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

* `transform`
* `<transform-function>`
* `scaleZ()`
* `translate3d()`
* `rotate3d()`
rotateX()
=========

La fonction **`rotateX()`** définit une transformation qui déplace l'élément autour de l'axe des abscisses sans le déformer. 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`.

`rotateX(a)` est une notation raccourcie, équivalente à `rotate3D(1, 0, 0, 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 opérée par `rotateX()` est indiquée par une valeur `<angle>`. Si celle-ci est positive, la rotation s'effectuera dans le sens horaire ; si la valeur est négative elle s'effectuera dans le sens anti-horaire.


```css
rotateX(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.
  | 

1
0
0

0
cos(a)
-sin(a)

0
sin(a)
cos(a)

 | 

1
0
0
0

0
cos(a)
-sin(a)
0

0
sin(a)
cos(a)
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: rotateX(45deg);
  background-color: pink;
}
```

### Résultat

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

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

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

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

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

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

La fonction **`scaleZ()`** modifie la coordonnée en Z de chaque point de l'élément avec un facteur multiplicateur donné. Si ce facteur vaut 1, l'opération appliquée sera l'identité. 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>`.

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

`scaleZ(sz)` est une notation raccourcie équivalente à `scale3d(1, 1, sz)`.

`scaleZ(-1)` définit une symétrie axiale selon l'axe Z qui passe par l'origine (définie grâce à la propriété `transform-origin`).

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 dans cet espace 3D.

Syntaxe
-------


```css
scaleZ(s)
```

### Valeurs

`s`

Une valeur de type `<number>` qui représente le facteur d'échelle à appliquer sur la côte (coordonnées en Z) de chaque point de l'élément.



| 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 sur l'espace en trois dimensions et ne
 peut donc être représentée sous la forme d'une transformation plane.
  | 

1
 0
0

0
 1
0

0
0
s

 | 

1
 0
0
0

0
 1
0
0

0
0
s
0

0
0
0
1

 |

Exemples
--------

### HTML


```html
<div>Normal</div>
<div class="perspective">Avec translation</div>
<div class="scaled-translated">Avec mise à l'échelle</div>
```

### CSS


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

.perspective {
  /\* On ajoute une perspective pour créer un volume 3D \*/
  transform: perspective(400px) translateZ(-100px);
  background-color: limegreen;
}

.scaled-translated {
  /\* On ajoute une perspective pour créer un volume 3D \*/
  transform: perspective(400px) scaleZ(2) translateZ(-100px);
  background-color: pink;
}
```

### Résultat

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

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

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

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

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

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

La fonction **`matrix()`** définit une matrice homogène de transformation, définie par 6 coefficients. Les paramètres de cette fonction sont ces coefficients, dans l'ordre des lignes puis des colonnes, suivis des coefficients de translation.

`matrix(a, b, c, d, tx, ty)` est une notation raccourcie, équivalente à `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)`.

Syntaxe
-------

La fonction `matrix()` s'utilise avec 6 valeurs. Les valeurs constantes sont implicites et ne sont pas passées comme paramètres. Les autres paramètres sont décrits dans l'ordre suivant d'abord les colonnes.


```css
matrix(a, b, c, d, tx, ty)
```

### Valeurs

`a` `b` `c` `d`

Les coefficients de la matrice, de type `<number>`, qui définissent la transformation linéaire.

`tx` `ty`

Les coefficients de la matrice, de type `<number>`, qui définissent la translation à appliquer.


**Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs `<length>` pour les coefficients `tx` et `ty`.


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

a
c

b
d

 | 

a
c
tx

b
d
ty

0
0
1

 | 

a
c
tx

b
d
ty

0
0
1

 | 

a
c
0
tx

b
d
0
ty

0
0
1
0

0
0
0
1

 |
| `[a b c d tx ty]` |

Exemples
--------

### HTML


```html
<p>toto</p>
<p class="transformation">truc</p>
```

### CSS


```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
  transform: matrix(0.87, -0.5, 0, 0.87, 0, 1);
  background-color: blue;
}
```

### Résultat

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

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

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

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

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

* `transform`
* `<transform-function>`
* `matrix3d()`
* Comprendre les matrices de transformations CSS (en anglais)
oklab()
=======

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La notation fonctionnelle **`oklab()`** exprime une couleur donnée dans l'espace de couleur OKLab, qui essaie de se rapprocher de la perception de la couleur par l'œil humain.

Syntaxe
-------


```css
oklab(40.1% 0.1143 0.045)
oklab(59.69% 0.1007 0.1191)
oklab(59.69% 0.1007 0.1191 / .5)
```

### Valeurs

`oklab(L a b [/ A])`

`L` indique la luminosité perçue et est exprimée comme un pourcentage (type `<percentage>`) compris entre `0%`, pour le noir, et `100%`, pour le blanc.

Le deuxième argument, `a`, indique la distance sur l'axe `a` de l'espace de couleur OKLab.

Le troisième argument, `b`, indique la distance sur l'axe `b` de l'espace de couleur OKLab.

`A` (alpha) peut être un nombre (type `<number>`) compris entre `0` et `1`, ou un pourcentage (type `<percentage>`), où `1` correspond à `100%` (opacité complète).

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

| Specification |
| --- |
| CSS Color Module Level 4 # ok-lab |

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

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

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

* Un espace de couleur perceptif pour le traitement des images
* Notes de version pour Safari Technology Preview 137 mentionnant `oklab()` et `oklch()`