diff options
Diffstat (limited to 'files/fr/web')
21 files changed, 616 insertions, 498 deletions
diff --git a/files/fr/web/css/transform-function/matrix()/index.md b/files/fr/web/css/transform-function/matrix()/index.md index 185bf51864..2979ff3099 100644 --- a/files/fr/web/css/transform-function/matrix()/index.md +++ b/files/fr/web/css/transform-function/matrix()/index.md @@ -1,12 +1,8 @@ --- title: matrix() slug: Web/CSS/transform-function/matrix() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/matrix() +browser-compat: css.types.transform-function.matrix --- {{CSSRef}} @@ -16,16 +12,20 @@ La fonction **`matrix()`** définit une matrice homogène de transformation, dé ## Syntaxe - matrix(a, b, c, d, tx, ty) +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 {{cssxref("<number>")}}, qui définissent la transformation linéaire. + - : Les coefficients de la matrice, de type [`<number>`](/fr/docs/Web/CSS/number), qui définissent la transformation linéaire. - `tx` `ty` - - : Les coefficients de la matrice, de type {{cssxref("<number>")}}, qui définissent la translation à appliquer. + - : Les coefficients de la matrice, de type [`<number>`](/fr/docs/Web/CSS/number), qui définissent la translation à appliquer. -> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<length>")}} pour les coefficients `tx` et `ty`. +> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs [`<length>`](/fr/docs/Web/CSS/length) pour les coefficients `tx` et `ty`. <table class="standard-table"> <thead> @@ -121,17 +121,15 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) - [`matrix3d()`](</fr/docs/Web/CSS/transform-function/matrix3d()>) - [Comprendre les matrices de transformations CSS (en anglais)](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/fr/web/css/transform-function/matrix3d()/index.md b/files/fr/web/css/transform-function/matrix3d()/index.md index 437115670e..6cac4ae944 100644 --- a/files/fr/web/css/transform-function/matrix3d()/index.md +++ b/files/fr/web/css/transform-function/matrix3d()/index.md @@ -1,28 +1,29 @@ --- title: matrix3d() slug: Web/CSS/transform-function/matrix3d() -tags: - - CSS - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/matrix3d() +browser-compat: css.types.transform-function.matrix3d --- {{CSSRef}} -La fonction **`matrix3d()`** décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type {{cssxref("<transform-function>")}}. +La fonction **`matrix3d()`** décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function). ## Syntaxe - matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) +La fonction `matrix3d()` s'utilise avec 16 valeurs qui sont décrites dans l'ordre des colonnes. + +```css +matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) +``` ### Valeurs - _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ _a3_ _b3_ _c3_ _d3_ _d4_ - - : Des valeurs de type {{cssxref("<number>")}} qui sont les coefficients de la matrice définissant la transformation linéaire. + - : Des valeurs de type [`<number>`](/fr/docs/Web/CSS/number) qui sont les coefficients de la matrice définissant la transformation linéaire. - `a4` `b4 c4` - - : Les coefficients de type {{cssxref("<number>")}} qui définissent la translation à appliquer. + - : Les coefficients de type [`<number>`](/fr/docs/Web/CSS/number) qui définissent la translation à appliquer. -> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<length>")}} pour les coefficients `a4`, `b4` et `c4`. +> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs [`<length>`](/fr/docs/Web/CSS/length) pour les coefficients `a4`, `b4` et `c4`. <table class="standard-table"> <thead> @@ -176,16 +177,14 @@ body { ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) - [Comprendre les matrices de transformations CSS (en anglais)](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/fr/web/css/transform-function/perspective()/index.md b/files/fr/web/css/transform-function/perspective()/index.md index 74d56fb92a..a325ec8bea 100644 --- a/files/fr/web/css/transform-function/perspective()/index.md +++ b/files/fr/web/css/transform-function/perspective()/index.md @@ -1,21 +1,18 @@ --- title: perspective() slug: Web/CSS/transform-function/perspective() -tags: - - CSS - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/perspective() +browser-compat: css.types.transform-function.perspective --- {{CSSRef}} -La fonction **`perspective()`** définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type {{cssxref("<transform-function>")}}. +La fonction **`perspective()`** définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function). -Le résultat de cette fonction est une valeur de type {{cssxref("<transform-function>")}}. +Le résultat de cette fonction est une valeur de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function). {{EmbedInteractiveExample("pages/css/function-perspective.html")}} -La fonction de transformation `perspective()`s'applique à l'élément qu'on veut transformer. En revanche, les propriétés {{cssxref('perspective')}} et {{cssxref('perspective-origin')}} s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D. +La fonction de transformation `perspective()`s'applique à l'élément qu'on veut transformer. En revanche, les propriétés [`perspective`](/fr/docs/Web/CSS/perspective) et [`perspective-origin`](/fr/docs/Web/CSS/perspective-origin) s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D. ## Syntaxe @@ -24,7 +21,7 @@ La fonction de transformation `perspective()`s'applique à l'élément qu'on veu ### Valeurs - _l_ - - : Une valeur de type {{cssxref("<length>")}} qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation `z = 0`. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée. + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation `z = 0`. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée. <table class="standard-table"> <thead> @@ -144,19 +141,17 @@ p + div { #### Résultat -{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '350', '', 'Web/CSS/transform-function/perspective')}} +{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '600')}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotate()/index.md b/files/fr/web/css/transform-function/rotate()/index.md index e097481ce2..ccd6bec1ed 100644 --- a/files/fr/web/css/transform-function/rotate()/index.md +++ b/files/fr/web/css/transform-function/rotate()/index.md @@ -1,29 +1,27 @@ --- title: rotate() slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/rotate() +browser-compat: css.types.transform-function.rotate --- {{CSSRef}} -La fonction **`rotate()`** définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété {{cssxref("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 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`](/fr/docs/Web/CSS/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 {{cssxref("<transform-function>")}}. +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>`](/fr/docs/Web/CSS/transform-function). ## Syntaxe -L'angle de la rotation créée grâce à `rotate()` est fourni comme argument à cette fonction via une valeur de type {{cssxref("<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. +L'angle de la rotation créée grâce à `rotate()` est fourni comme argument à cette fonction via une aleur de type [`<angle>`](/fr/docs/Web/CSS/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. - rotate(a) +```css +rotate(a) +``` ### Valeurs - _a_ - - : Une valeur de type {{cssxref("<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. + - : Une valeur de type [`<angle>`](/fr/docs/Web/SS/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. <table class="standard-table"> <thead> @@ -166,20 +164,18 @@ div { #### Résultat -{{EmbedLiveSample("Associer_une_rotation_avec_une_autre_transformation", "auto", 320)}} +{{EmbedLiveSample("Associer_une_rotation_à_une_autre_transformation", "auto", 320)}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) - [`rotate3d()`](</fr/docs/Web/CSS/transform-function/rotate3d()>) diff --git a/files/fr/web/css/transform-function/rotate3d()/index.md b/files/fr/web/css/transform-function/rotate3d()/index.md index f4c2e410a0..eae07a3074 100644 --- a/files/fr/web/css/transform-function/rotate3d()/index.md +++ b/files/fr/web/css/transform-function/rotate3d()/index.md @@ -1,22 +1,18 @@ --- title: rotate3d() slug: Web/CSS/transform-function/rotate3d() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/rotate3d() +browser-compat: css.types.transform-function.rotate3d --- {{CSSRef}} -La fonction **`rotate3d()`** définit une transformation qui déplace un élément autour d'un axe sans le déformer. L'angle de la rotation est un 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 {{cssxref("<transform-function>")}}. +La fonction **`rotate3d()`** définit une transformation qui déplace un élément autour d'un axe sans le déformer. L'angle de la rotation est un 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>`](/fr/docs/Web/CSS/transform-function). {{EmbedInteractiveExample("pages/css/rotate3d.html")}} -Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide. +Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide. -> **Note :** Contrairement aux rotations appliqués 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. +> **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 @@ -25,13 +21,13 @@ Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté ### Valeurs - `x` - - : Une valeur de type {{cssxref("<number>")}} qui définit la composante en X (l'abscisse) du vecteur qui sera l'axe de la rotation. + - : Une valeur de type [`<number>`](/fr/docs/Web/CSS/number) qui définit la composante en X (l'abscisse) du vecteur qui sera l'axe de la rotation. - `y` - - : Une valeur de type {{cssxref("<number>")}} qui définit la composante en Y (l'ordonnée) du vecteur qui sera l'axe de la rotation. + - : Une valeur de type [`<number>`](/fr/docs/Web/CSS/number) qui définit la composante en Y (l'ordonnée) du vecteur qui sera l'axe de la rotation. - `z` - - : Une valeur de type {{cssxref("<number>")}} qui définit la composante en Z (la côte) du vecteur qui sera l'axe de la rotation. + - : Une valeur de type [`<number>`](/fr/docs/Web/CSS/number) qui définit la composante en Z (la côte) du vecteur qui sera l'axe de la rotation. - `a` - - : Une valeur de type {{cssxref("<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. + - : Une valeur de type [`<angle>`](/fr/docs/Web/CSS/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. <table class="standard-table"> <thead> @@ -161,15 +157,13 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName("CSS Transforms 2", "#funcdef-rotate3d", "rotate3d()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotatex()/index.md b/files/fr/web/css/transform-function/rotatex()/index.md index 5e73a492af..d58880be97 100644 --- a/files/fr/web/css/transform-function/rotatex()/index.md +++ b/files/fr/web/css/transform-function/rotatex()/index.md @@ -1,12 +1,8 @@ --- title: rotateX() slug: Web/CSS/transform-function/rotateX() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/rotateX() +browser-compat: css.types.transform-function.rotateX --- {{CSSRef}} @@ -14,20 +10,24 @@ La fonction **`rotateX()`** définit une transformation qui déplace l'élément {{EmbedInteractiveExample("pages/css/function-rotateX.html")}} -L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}. +L'axe de la rotation passe par l'origine du repère, définie par la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin). `rotateX(a)` est une notation raccourcie, équivalente à `rotate3D(1, 0, 0, a)`. -> **Note :** Contrairement aux rotations appliqués 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. +> **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 - rotateX(a) +L'angle de la rotation opérée par `rotateX()` est indiquée par une valeur [`<angle>`](/fr/docs/Web/CSS/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 {{cssxref("<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. + - : Une valeur de type [`<angle>`](/fr/docs/Web/CSS/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. <table class="standard-table"> <thead> @@ -40,11 +40,11 @@ L'axe de la rotation passe par l'origine du repère, définie par la propriété </thead> <tbody> <tr> - <td colspan="2" rowspan="2"> + <td colspan="2"> Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions. </td> - <td colspan="1"> + <td> <math ><mfenced ><mtable @@ -81,22 +81,22 @@ L'axe de la rotation passe par l'origine du repère, définie par la propriété ### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> +<div>Normal</div> +<div class="rotated">Tourné</div> ``` ### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { +.rotated { transform: rotateX(45deg); - background-color: blue; + background-color: pink; } ``` @@ -106,15 +106,13 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotatey()/index.md b/files/fr/web/css/transform-function/rotatey()/index.md index 9c2e74d296..c63382815e 100644 --- a/files/fr/web/css/transform-function/rotatey()/index.md +++ b/files/fr/web/css/transform-function/rotatey()/index.md @@ -1,12 +1,8 @@ --- title: rotateY() slug: Web/CSS/transform-function/rotateY() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/rotateY() +browser-compat: css.types.transform-function.rotateY --- {{CSSRef}} @@ -14,20 +10,24 @@ La fonction **`rotateY()`** définit une rotation, qui déplace l'élément auto {{EmbedInteractiveExample("pages/css/function-rotateY.html")}} -L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}. +L'axe de la rotation passe par l'origine du repère, définie par la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin). `rotateY(a)` est une notation raccourcie, équivalente à `rotate3D(0, 1, 0, a)`. -> **Note :** Contrairement aux rotations appliqués 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. +> **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 - rotateY(a) +L'angle de la rotation appliquée par `rotateY()` est fourni par une valeur [`<angle>`](/fr/docs/Web/CSS/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 {{cssxref("<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. + - : Une valeur de type [`<angle>`](/fr/docs/Web/CSS/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. <table class="standard-table"> <thead> @@ -83,22 +83,22 @@ L'axe de la rotation passe par l'origine du repère, définie par la propriété ### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> +<div>Normal</div> +<div class="rotated">Tourné</div> ``` ### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { +.rotated { transform: rotateY(60deg); - background-color: blue; + background-color: pink; } ``` @@ -108,15 +108,13 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotatez()/index.md b/files/fr/web/css/transform-function/rotatez()/index.md index 4588fec79b..c39015700b 100644 --- a/files/fr/web/css/transform-function/rotatez()/index.md +++ b/files/fr/web/css/transform-function/rotatez()/index.md @@ -1,12 +1,8 @@ --- title: rotateZ() slug: Web/CSS/transform-function/rotateZ() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/rotateZ() +browser-compat: css.types.transform-function.rotateZ --- {{CSSRef}} @@ -14,20 +10,24 @@ La fonction **`rotateZ()`** définit une transformation qui déplace l'élément {{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} -L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}. +L'axe de la rotation passe par l'origine du repère, définie par la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin). `rotateZ(a)` est une notation raccourcie équivalente à `rotate3D(0, 0, 1, a)`. -> **Note :** Contrairement aux rotations appliqués 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. +> **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 - rotateZ(a) +L'angle de la rotation appliquée par `rotateZ()` est fourni par une valeur [`<angle>`](/fr/docs/Web/CSS/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 {{cssxref("<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. + - : Une valeur de type [`<angle>`](/fr/docs/Web/CSS/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. <table class="standard-table"> <thead> @@ -40,11 +40,11 @@ L'axe de la rotation passe par l'origine du repère, définie par la propriété </thead> <tbody> <tr> - <td colspan="2" rowspan="2"> + <td colspan="2"> Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions. </td> - <td colspan="1" rowspan="2"> + <td> <math ><mfenced ><mtable @@ -55,7 +55,7 @@ L'axe de la rotation passe par l'origine du repère, définie par la propriété ></math > </td> - <td colspan="1" rowspan="2"> + <td> <math ><mfenced ><mtable @@ -81,22 +81,22 @@ L'axe de la rotation passe par l'origine du repère, définie par la propriété ### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> +<div>Normal</div> +<div class="rotated">Tourné</div> ``` ### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { +.rotated { transform: rotateZ(45deg); - background-color: blue; + background-color: pink; } ``` @@ -106,15 +106,13 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/scale()/index.md b/files/fr/web/css/transform-function/scale()/index.md index bffb13cc70..68fae2dc27 100644 --- a/files/fr/web/css/transform-function/scale()/index.md +++ b/files/fr/web/css/transform-function/scale()/index.md @@ -1,18 +1,12 @@ --- title: scale() slug: Web/CSS/transform-function/scale() -tags: - - CSS - - CSS Function - - CSS Transforms - - Function - - Reference translation_of: Web/CSS/transform-function/scale() -browser-compat: css.types.transform-function +browser-compat: css.types.transform-function.scale --- {{CSSRef}} -La fonction **`scale()`** permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions. Le résultat de cette fonction est une valeur de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function). +La fonction CSS **`scale()`** permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions. Le résultat de cette fonction est une valeur de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function).  @@ -24,8 +18,12 @@ Lorsque les coordonnées du vecteur sont en dehors de l'intervalle \[`-1, 1]`, l ## Syntaxe +La fonction `scale()` s'utilise avec une ou deux valeurs qui indiquent l'échelle à utiliser selon chaque direction. + + ```css scale(sx) + scale(sx, sy) ``` @@ -132,7 +130,7 @@ Vous pouvez également tirer parti de la caractéristique média [`prefers-reduc Pour en savoir plus : -- [Comprendres les règles WCAG 2.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%e2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions) +- [Comprendre les règles WCAG 2.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%e2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions) - [Comprendre les critères de succès WCAG 2.1 / 2.3.3 (W3C)](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) ## Exemples @@ -163,7 +161,7 @@ div { #### Résultat -{{EmbedLiveSample("scaling_the_x_and_y_dimensions_together", "200", "200")}} +{{EmbedLiveSample("Déformation_horizontale_et_verticale", "200", "200")}} ### Déformer horizontalement et verticalement avec origine déplacée @@ -192,7 +190,7 @@ div { #### Résultat -{{EmbedLiveSample("scaling_x_and_y_dimensions_separately_and_translating_the_origin", "200", "200")}} +{{EmbedLiveSample("Déformer_horizontalement_et_verticalement_avec_origine_déplacée", "200", "200")}} ## Spécifications diff --git a/files/fr/web/css/transform-function/scale3d()/index.md b/files/fr/web/css/transform-function/scale3d()/index.md index 3b2fa3794a..f681f08b90 100644 --- a/files/fr/web/css/transform-function/scale3d()/index.md +++ b/files/fr/web/css/transform-function/scale3d()/index.md @@ -1,12 +1,8 @@ --- title: scale3d() slug: Web/CSS/transform-function/scale3d() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/scale3d() +browser-compat: css.types.transform-function.scale3d --- {{CSSRef}} @@ -16,20 +12,24 @@ La fonction **`scale3d()`** permet de modifier la taille d'un élément en appli 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 vecteurs 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. +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 - scale3d(sx, sy, sz) +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 {{cssxref("<number>")}} qui représente l'abscisse du vecteur définissant l'homothétie. + - : Une valeur de type [`<number>`](/fr/docs/Web/CSS/number) qui représente l'abscisse du vecteur définissant l'homothétie. - `sy` - - : Une valeur de type {{cssxref("<number>")}} qui représente l'ordonnée du vecteur définissant l'homothétie + - : Une valeur de type [`<number>`](/fr/docs/Web/CSS/number) qui représente l'ordonnée du vecteur définissant l'homothétie - `sz` - - : Une valeur de type {{cssxref("<number>")}} qui représente la composante, selon l'axe Z, du vecteur définissant l'homothétie + - : Une valeur de type [`<number>`](/fr/docs/Web/CSS/number) qui représente la composante, selon l'axe Z, du vecteur définissant l'homothétie <table class="standard-table"> <thead> @@ -42,11 +42,11 @@ Lorsque les composantes du vecteurs sont en dehors de l'intervalle `[-1, 1]`, la </thead> <tbody> <tr> - <td colspan="2" rowspan="2"> + <td colspan="2"> Cette transformation s'applique dans en 3 dimensions et ne peut pas être représentée sur le plan. </td> - <td colspan="1" rowspan="2"> + <td> <math ><mfenced ><mtable @@ -57,7 +57,7 @@ Lorsque les composantes du vecteurs sont en dehors de l'intervalle `[-1, 1]`, la ></math > </td> - <td colspan="1" rowspan="2"> + <td> <math ><mfenced ><mtable @@ -82,22 +82,22 @@ Lorsque les composantes du vecteurs sont en dehors de l'intervalle `[-1, 1]`, la #### HTML ```html -<p>foo</p> -<p class="transformation">bar</p> +<div>Normal</div> +<div class="scaled">Mis à l'échelle</div> ``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { - transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px); - background-color: blue; +.scaled { + transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); + background-color: pink; } ``` @@ -110,23 +110,23 @@ p { #### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> +<div>Normal</div> +<div class="scaled">Mis à l'échelle</div> ``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { - transform: scale3d(2, 3, 0); - transform-origin: center; - background-color: blue; +.scaled { + transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); + transform-origin: left; + background-color: pink; } ``` @@ -136,18 +136,16 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName("CSS Transforms 2", "#funcdef-scale3d", "scale3d()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [`scaleZ()`](</fr/docs/Web/CSS/transform-function/scaleZ()>) -- [`translate3d()`](</fr/docs/Web/CSS/transform-function/translate3d()>) -- [`rotate3d()`](</fr/docs/Web/CSS/transform-function/rotate3d()>) +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) +- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ()) +- [`translate3d()`](/fr/docs/Web/CSS/transform-function/translate3d()) +- [`rotate3d()`](/fr/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/fr/web/css/transform-function/scalex()/index.md b/files/fr/web/css/transform-function/scalex()/index.md index 9a1b98907c..f55fd09771 100644 --- a/files/fr/web/css/transform-function/scalex()/index.md +++ b/files/fr/web/css/transform-function/scalex()/index.md @@ -1,12 +1,8 @@ --- title: scaleX() slug: Web/CSS/transform-function/scaleX() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/scaleX() +browser-compat: css.types.transform-function.scaleX --- {{CSSRef}} @@ -16,16 +12,18 @@ La fonction **`scaleX()`** permet de modifier l'abscisse de chaque sommet de l' `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é {{cssxref("transform-origin")}}). +`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`](/fr/docs/Web/CSS/transform-origin)). ## Syntaxe - scaleX(s) +```css +scaleX(s) +``` ### Valeurs - `s` - - : Une valeur de type {{cssxref("<number>")}} qui représente le facteur d'échelle de l'homothétie. + - : Une valeur de type [`<number>`](/fr/docs/Web/CSS/number) qui représente le facteur d'échelle de l'homothétie. <table class="standard-table"> <thead> @@ -98,22 +96,22 @@ La fonction **`scaleX()`** permet de modifier l'abscisse de chaque sommet de l' #### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> +<div>Normal</div> +<div class="scaled">Mis à l'échelle</div> ``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { - transform: scaleX(2); - background-color: blue; +.scaled { + transform: scaleX(0.6); + background-color: pink; } ``` @@ -126,23 +124,23 @@ p { #### HTML ```html -<p>toto</p> -<p class="transformation">bar</p> +<div>Normal</div> +<div class="scaled">Mis à l'échelle</div> ``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { - transform: scaleX(2); +.scaled { + transform: scaleX(0.6); transform-origin: left; - background-color: blue; + background-color: pink; } ``` @@ -152,18 +150,16 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- | -| {{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- [`scaleY()`](</fr/docs/Web/CSS/transform-function/scaleY()>) -- [`scaleZ()`](</fr/docs/Web/CSS/transform-function/scaleZ()>) -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-origin")}} +- [`scaleY()`](/fr/docs/Web/CSS/transform-function/scaleY()) +- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ()) +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) +- [`transform-origin`](/fr/docs/Web/CSS/transform-origin) diff --git a/files/fr/web/css/transform-function/scaley()/index.md b/files/fr/web/css/transform-function/scaley()/index.md index 7b922436d8..0b1d7315d5 100644 --- a/files/fr/web/css/transform-function/scaley()/index.md +++ b/files/fr/web/css/transform-function/scaley()/index.md @@ -1,31 +1,29 @@ --- title: scaleY() slug: Web/CSS/transform-function/scaleY() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/scaleY() +browser-compat: css.types.transform-function.scaleY --- {{CSSRef}} -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 {{cssxref("<transform-function>")}}. +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(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é {{cssxref("transform-origin")}}). +`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`](/fr/docs/Web/CSS/transform-origin)). ## Syntaxe - scaleY(s) +```css +scaleY(s) +``` ### Valeurs - `s` - - : Une valeur de type {{cssxref("<number>")}} qui indique le facteur d'échelle pour l'homothétie. + - : Une valeur de type [`<number>`](/fr/docs/Web/CSS/number) qui indique le facteur d'échelle pour l'homothétie. <table class="standard-table"> <thead> @@ -96,22 +94,22 @@ La fonction **`scaleY()`** modifie l'ordonnée de chaque sommet de l'élément a ### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> +<div>Normal</div> +<div class="scaled">Mis à l'échelle</div> ``` ### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { - transform: scaleY(2); - background-color: blue; +.scaled { + transform: scaleY(0.6); + background-color: pink; } ``` @@ -121,18 +119,16 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName("CSS3 Transforms", "#funcdef-transform-scaley", "scaleY()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- [`scaleX()`](</fr/docs/Web/CSS/transform-function/scaleX()>) -- [`scaleZ()`](</fr/docs/Web/CSS/transform-function/scaleZ()>) -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-origin")}} +- [`scaleX()`](/fr/docs/Web/CSS/transform-function/scaleX()) +- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ()) +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) +- [`transform-origin`](/fr/docs/Web/CSS/transform-origin) diff --git a/files/fr/web/css/transform-function/scalez()/index.md b/files/fr/web/css/transform-function/scalez()/index.md index 7fb32c1587..3e28f8ab99 100644 --- a/files/fr/web/css/transform-function/scalez()/index.md +++ b/files/fr/web/css/transform-function/scalez()/index.md @@ -1,33 +1,31 @@ --- title: scaleZ() slug: Web/CSS/transform-function/scaleZ() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/scaleZ() +browser-compat: css.types.transform-function.scaleZ --- {{CSSRef}} -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é 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 {{cssxref("<transform-function>")}}. +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>`](/fr/docs/Web/CSS/transform-function). {{EmbedInteractiveExample("pages/css/function-scaleZ.html")}} `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é {{cssxref("transform-origin")}}). +`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`](/fr/docs/Web/CSS/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 - scaleZ(s) +```css +scaleZ(s) +``` ### Valeurs - `s` - - : Une valeur de type {{cssxref("<number>")}} qui représente le facteur d'échelle à appliquer sur la côte (coordonnées en Z) de chaque point de l'élément. + - : Une valeur de type [`<number>`](/fr/docs/Web/CSS/number) qui représente le facteur d'échelle à appliquer sur la côte (coordonnées en Z) de chaque point de l'élément. <table class="standard-table"> <thead> @@ -40,11 +38,11 @@ Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée </thead> <tbody> <tr> - <td colspan="2" rowspan="2"> + <td colspan="2"> 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. </td> - <td colspan="1" rowspan="2"> + <td> <math ><mfenced ><mtable @@ -55,7 +53,7 @@ Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée ></math > </td> - <td colspan="1" rowspan="2"> + <td> <math ><mfenced ><mtable @@ -78,28 +76,30 @@ Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée ### HTML ```html -<p>toto</p> -<p class="translation">Translaté</p> -<p class="homothetie">Échelle</p> +<div>Normal</div> +<div class="perspective">Avec translation</div> +<div class="scaled-translated">Avec mise à l'échelle</div> ``` ### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.translation{ +.perspective { /* On ajoute une perspective pour créer un volume 3D */ - transform: perspective(500px) translateZ(100px); + transform: perspective(400px) translateZ(-100px); + background-color: limegreen; } -.homothetie{ +.scaled-translated { /* On ajoute une perspective pour créer un volume 3D */ - transform: perspective(500px) scaleZ(2) translateZ(100px); + transform: perspective(400px) scaleZ(2) translateZ(-100px); + background-color: pink; } ``` @@ -109,18 +109,16 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName("CSS Transforms 2", "#funcdef-scalez", "scaleZ()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- [`scaleX()`](</fr/docs/Web/CSS/transform-function/scaleX()>) -- [`scaleY()`](</fr/docs/Web/CSS/transform-function/scaleY()>) -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-origin")}} +- [`scaleX()`](/fr/docs/Web/CSS/transform-function/scaleX()) +- [`scaleY()`](/fr/docs/Web/CSS/transform-function/scaleY()) +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) +- [`transform-origin`](/fr/docs/Web/CSS/transform-origin) diff --git a/files/fr/web/css/transform-function/skew()/index.md b/files/fr/web/css/transform-function/skew()/index.md index 11b994aa42..600ff281a9 100644 --- a/files/fr/web/css/transform-function/skew()/index.md +++ b/files/fr/web/css/transform-function/skew()/index.md @@ -1,12 +1,8 @@ --- title: skew() slug: Web/CSS/transform-function/skew() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/skew() +browser-compat: css.types.transform-function.skew --- {{CSSRef}} @@ -14,19 +10,24 @@ La fonction **`skew()`** permet d'opérer une distorsion en étirant chaque poin {{EmbedInteractiveExample("pages/css/function-skew.html")}} -La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. +La valeur obtenue par cette fonction est de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function). ## Syntaxe - skew(ax) - skew(ax, ay) +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 {{cssxref("<angle>")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal). + - : Une valeur de type [`<angle>`](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal). - `ay` - - : Une valeur de type {{cssxref("<angle>")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). + - : Une valeur de type [`<angle>`](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). <table class="standard-table"> <thead> @@ -98,23 +99,26 @@ La valeur obtenue par cette fonction est de type {{cssxref("<transform-functi #### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> +<div>Normal</div> +<div class="skewed">Distordu</div> ``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +body { + margin: 20px; } -.transformation { - /* the same as skewX(10deg); */ - transform: skew(10deg); - background-color: blue; +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg); /* Équivalent à skewX(10deg) */ + background-color: pink; } ``` @@ -127,22 +131,26 @@ p { #### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> +<div>Normal</div> +<div class="skewed">Distordu</div> ``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { +.skewed { transform: skew(10deg, 10deg); - background-color: blue; + background-color: pink; } ``` @@ -152,15 +160,15 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) +- [`skewX()`](/fr/docs/Web/CSS/transform-function/skewX()) +- [`skewY()`](/fr/docs/Web/CSS/transform-function/skewY()) diff --git a/files/fr/web/css/transform-function/skewx()/index.md b/files/fr/web/css/transform-function/skewx()/index.md index a82f7c2a1c..e56061b928 100644 --- a/files/fr/web/css/transform-function/skewx()/index.md +++ b/files/fr/web/css/transform-function/skewx()/index.md @@ -1,12 +1,8 @@ --- title: skewX() slug: Web/CSS/transform-function/skewX() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/skewX() +browser-compat: css.types.transform-function.skewX --- {{CSSRef}} @@ -14,18 +10,20 @@ La fonction **`skewX()`** permet d'opérer une distorsion horizontale en étiran {{EmbedInteractiveExample("pages/css/function-skewX.html")}} -La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. +La valeur obtenue par cette fonction est de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function). `skewX(a)` est équivalent à [`skew(a)`](</fr/docs/Web/CSS/transform-function/skew()>). ## Syntaxe - skewX(a) +```css +skewX(a) +``` ### Valeurs - `a` - - : Une valeur de type {{cssxref("<angle>")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal). + - : Une valeur de type [`<angle>`](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal). <table class="standard-table"> <thead> @@ -96,22 +94,22 @@ La valeur obtenue par cette fonction est de type {{cssxref("<transform-functi ### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> +<div>Normal</div> +<div class="skewed">Distordu</div> ``` ### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { - transform: skewX(10deg); - background-color: blue; +.skewed { + transform: skewX(10deg); /* Équivalent à skew(10deg) */ + background-color: pink; } ``` @@ -121,15 +119,13 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/skewy()/index.md b/files/fr/web/css/transform-function/skewy()/index.md index a064f14624..5496e7d50e 100644 --- a/files/fr/web/css/transform-function/skewy()/index.md +++ b/files/fr/web/css/transform-function/skewy()/index.md @@ -1,12 +1,8 @@ --- title: skewY() slug: Web/CSS/transform-function/skewY() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/skewY() +browser-compat: css.types.transform-function.skewY --- {{CSSRef}} @@ -14,16 +10,18 @@ La fonction **`skewY()`** permet d'opérer une distorsion verticale en étirant {{EmbedInteractiveExample("pages/css/function-skewY.html")}} -La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. +La valeur obtenue par cette fonction est de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function). ## Syntaxe - skewY(a) +```css +skewY(a) +``` ### Valeurs - `a` - - : Une valeur de type {{cssxref("<angle>")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). + - : Une valeur de type [`<angle>`](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). <table class="standard-table"> <thead> @@ -94,22 +92,22 @@ La valeur obtenue par cette fonction est de type {{cssxref("<transform-functi ### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> +<div>Normal</div> +<div class="skewed">Distordu</div> ``` ### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { +.skewed { transform: skewY(40deg); - background-color: blue; + background-color: pink; } ``` @@ -119,15 +117,13 @@ p { ## Specifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translate()/index.md b/files/fr/web/css/transform-function/translate()/index.md index b832478484..c51a505285 100644 --- a/files/fr/web/css/transform-function/translate()/index.md +++ b/files/fr/web/css/transform-function/translate()/index.md @@ -1,12 +1,8 @@ --- title: translate() slug: Web/CSS/transform-function/translate() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/translate() +browser-compat: css.types.transform-function.translate --- {{CSSRef}} @@ -14,26 +10,34 @@ La fonction **`translate()`** permet de déplacer un élément sur le plan repr  -La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. +La valeur obtenue par cette fonction est de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function). ## Syntaxe - translate(tx) - translate(tx, ty) - +```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 -- `tx` - - : Une valeur de type {{cssxref("<length>")}} qui représente l'abscisse du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement horizontal de la translation. -- `ty` - - : Une valeur de type {{cssxref("<length>")}} qui représente l'ordonnée du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement vertical de la translation. Si ce paramètre n'est pas utilisé, la valeur par défaut sera 0 : `translate(2)` sera donc équivalent à `translate(2, 0)`. +- Avec une seule valeur `<length-percentage>` + - : Cette valeur est de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/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`](/fr/docs/Web/CSS/transform-box). +- Avec deux valeurs `<length-percentage>` + - : Ces valeurs sont de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/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`](/fr/docs/Web/CSS/transform-box)). <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 cartésiennes sur ℝ<sup>3</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th> </tr> </thead> @@ -44,7 +48,7 @@ La valeur obtenue par cette fonction est de type {{cssxref("<transform-functi Une translation plane n'est pas une transformation linéaire de ℝ<sup >2</sup > - et ne peut donc pas être représentée sous la forme d'une matrice dans + et ne peut donc pas être représentée sous la forme d'une matrice dans le système cartésien. </p> </td> @@ -98,24 +102,23 @@ La valeur obtenue par cette fonction est de type {{cssxref("<transform-functi #### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> -<p>toto</p> +<div>Statique</div> +<div class="moved">Déplacé</div> +<div>Statique</div> ``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 60px; + height: 60px; + background-color: skyblue; } -.transformation { - transform: translate(10px); - /* équivalent à translateX(10px)*/ - background-color: blue; +.moved { + transform: translate(10px); /* Équivalent à : translateX(10px) ou translate(10px, 0) */ + background-color: pink; } ``` @@ -128,23 +131,23 @@ p { #### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> -<p>toto</p> +<div>Statique</div> +<div class="moved">Déplacé</div> +<div>Statique</div> ``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 60px; + height: 60px; + background-color: skyblue; } -.transformation { - transform: translate(10px,10px); - background-color: blue; +.moved { + transform: translate(10px, 10px); + background-color: pink; } ``` @@ -154,15 +157,13 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}} | {{Spec2('CSS3 Transforms')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translate3d()/index.md b/files/fr/web/css/transform-function/translate3d()/index.md index 3e36281947..feb4b031dc 100644 --- a/files/fr/web/css/transform-function/translate3d()/index.md +++ b/files/fr/web/css/transform-function/translate3d()/index.md @@ -1,12 +1,8 @@ --- title: translate3d() slug: Web/CSS/transform-function/translate3d() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/translate3d() +browser-compat: css.types.transform-function.translate3d --- {{CSSRef}} @@ -14,20 +10,22 @@ La fonction CSS **`translate3d()`** permet de déplacer un élément dans l'espa {{EmbedInteractiveExample("pages/css/function-translate3d.html")}} -La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. +La valeur obtenue par cette fonction est de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function). ## Syntaxe - translate3d(tx, ty, tz) +```css +translate3d(tx, ty, tz) +``` ### Valeurs - `tx` - - : Une valeur de type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). - `ty` - - : Une valeur de type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). - `tz` - - : 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. + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/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>`](/fr/docs/Web/CSS/percentage), si c'est le cas, la règle décrivant la transformation sera considérée comme invalide. <table class="standard-table"> <thead> @@ -40,18 +38,18 @@ La valeur obtenue par cette fonction est de type {{cssxref("<transform-functi </thead> <tbody> <tr> - <td colspan="2" rowspan="2"> + <td colspan="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"> + <td> 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"> + <td> <math ><mfenced ><mtable @@ -76,23 +74,23 @@ La valeur obtenue par cette fonction est de type {{cssxref("<transform-functi #### HTML ```html -<p>Statique</p> -<p class="transformation">Bougé</p> -<p>Statique</p> +<div>Statique</div> +<div class="moved">Déplacé</div> +<div>Statique</div> ``` #### CSS ```css -p { +div { width: 60px; height: 60px; background-color: skyblue; } -.transformation { +.moved { transform: perspective(500px) translate3d(10px,0px,0px); - /* equivalent to perspective(500px) translateX(10px)*/ + /* Équivalent à perspective(500px) translateX(10px)*/ background-color: pink; } ``` @@ -106,22 +104,22 @@ p { #### HTML ```html -<p>Statique</p> -<p class="transformation">Bougé</p> -<p>Statique</p> +<div>Statique</div> +<div class="moved">Déplacé</div> +<div>Statique</div> ``` #### CSS ```css -p { +div { width: 60px; height: 60px; background-color: skyblue; } -.transformation { - transform: perspective(500px) translate3d(10px,0px,100px); +.moved { + transform: perspective(500px) translate3d(10px, 0, 100px); background-color: pink; } ``` @@ -132,15 +130,13 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translatex()/index.md b/files/fr/web/css/transform-function/translatex()/index.md new file mode 100644 index 0000000000..e56ae4d35e --- /dev/null +++ b/files/fr/web/css/transform-function/translatex()/index.md @@ -0,0 +1,156 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX() +translation-of: Web/CSS/transform-function/translateX() +browser-compat: css.types.transform-function.translateX +--- +{{CSSRef}} + +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). + + + +> **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>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/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`](/fr/docs/Web/CSS/transform-box). + +<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>2</sup></th> + <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <p> + Une translation n'étant pas une transformation linéaire pour ℝ<sup>2</sup>, elle ne peut pas être représentée par une matrice avec des coordonnées cartésiennes. + </p> + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mi>t</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mi>t</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mi>t</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + <tr> + <td><code>[1 0 0 1 t 0]</code></td> + </tr> + </tbody> +</table> + +### 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 + +{{EmbedLiveSample("Exemples", 250, 250)}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`translate()`](/fr/docs/Web/CSS/transform-function/translate) +- [`translateY()`](/fr/docs/Web/CSS/transform-function/translateY) +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translatey()/index.md b/files/fr/web/css/transform-function/translatey()/index.md index c897c4e2b6..fdd27c602c 100644 --- a/files/fr/web/css/transform-function/translatey()/index.md +++ b/files/fr/web/css/transform-function/translatey()/index.md @@ -1,16 +1,12 @@ --- title: translateY() slug: Web/CSS/transform-function/translateY() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/translateY() +browser-compat: css.types.transform-function.translateY --- {{CSSRef}} -La fonction **`translateY()`** permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type {{cssxref("<length>")}}) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. +La fonction **`translateY()`** permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type [`<length>`](/fr/docs/Web/CSS/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).  @@ -18,12 +14,16 @@ La fonction **`translateY()`** permet de déplacer un élement verticalement sur ## Syntaxe - translateY(t) +```css +/* Valeurs de type <length-percentage> */ +transform: translateY(200px); +transform: translateY(50%); +``` ### Valeurs - `t` - - : Une valeur de type {{cssxref("<length>")}} qui représente l'ordonnée du vecteur de translation (la composante en Y). + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) qui représente l'ordonnée du vecteur de translation (la composante en Y). <table class="standard-table"> <thead> @@ -90,28 +90,34 @@ La fonction **`translateY()`** permet de déplacer un élement verticalement sur </tbody> </table> +### Syntaxe formelle + +```css +translateY([`<length-percentage>`](/fr/docs/Web/CSS/length-percentage)) +``` + ## Exemples ### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> -<p>toto</p> +<div>Statique</div> +<div class="moved">Déplacé</div> +<div>Statique</div> ``` ### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 60px; + height: 60px; + background-color: skyblue; } -.transformation { +.moved { transform: translateY(10px); - background-color: blue; + background-color: pink; } ``` @@ -121,15 +127,13 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translatez()/index.md b/files/fr/web/css/transform-function/translatez()/index.md index 17aaab3ff3..fb4b9fe811 100644 --- a/files/fr/web/css/transform-function/translatez()/index.md +++ b/files/fr/web/css/transform-function/translatez()/index.md @@ -1,16 +1,12 @@ --- title: translateZ() slug: Web/CSS/transform-function/translateZ() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/translateZ() +browser-compat: css.types.transform-function.translateZ --- {{CSSRef}} -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 {{cssxref("<length>")}}) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. +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>`](/fr/docs/Web/CSS/length)) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function). {{EmbedInteractiveExample("pages/css/function-translateZ.html")}} @@ -20,12 +16,14 @@ Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée ## Syntaxe - translateZ(t) +```css +translateZ(tz) +``` ### Valeurs - `t` - - : Une valeur de type {{cssxref("<length>")}} qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type {{cssxref("<percentage>")}}, si c'est le cas, la propriété qui contient la transformation est considérée comme invalide. + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type [`<percentage>`](/fr/docs/Web/CSS/percentage), si c'est le cas, la propriété qui contient la transformation est considérée comme invalide. <table class="standard-table"> <thead> @@ -70,25 +68,28 @@ Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée ### HTML ```html -<p>toto</p> -<p class="transformation">truc</p> +<div>Statique</div> +<div class="moved">Déplacé</div> ``` ### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + position: relative; + width: 60px; + height: 60px; + left: 100px; + background-color: skyblue; } -.transformation { +.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; } ``` @@ -96,21 +97,19 @@ p { {{EmbedLiveSample("Exemples")}} -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. +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 -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------- | -| {{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}} | {{Spec2('CSS Transforms 2')}} | Ajout des fonctions de transformations 3D au module standard _CSS Transforms_ | +{{Specifications}} ## Compatibilité des navigateurs -Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. +{{Compat}} ## Voir aussi -- {{cssxref("<transform-function>")}} +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) - [Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) -- {{cssxref("transform")}} -- {{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY()", "translateY()")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [`translateX()`](/fr/docs/Web/CSS/transform-function/translateX()) et [`translateY()`](/fr/docs/Web/CSS/transform-function/translateY())
\ No newline at end of file |