From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../css/transform-function/scale3d()/index.html | 141 +++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 files/fr/web/css/transform-function/scale3d()/index.html (limited to 'files/fr/web/css/transform-function/scale3d()') diff --git a/files/fr/web/css/transform-function/scale3d()/index.html b/files/fr/web/css/transform-function/scale3d()/index.html new file mode 100644 index 0000000000..cddec8bdc7 --- /dev/null +++ b/files/fr/web/css/transform-function/scale3d()/index.html @@ -0,0 +1,141 @@ +--- +title: scale3d() +slug: Web/CSS/transform-function/scale3d() +tags: + - CSS + - Fonction + - Reference + - Transformations CSS +translation_of: Web/CSS/transform-function/scale3d() +--- +
{{CSSRef}}
+ +

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.

+ +
{{EmbedInteractiveExample("pages/css/function-scale3d.html")}}
+ + + +

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.

+ +

Syntaxe

+ +
scale3d(sx, sy, sz)
+
+ +

Valeurs

+ +
+
sx
+
Une valeur de type {{cssxref("<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
+
sz
+
Une valeur de type {{cssxref("<number>")}} qui représente la composante, selon l'axe Z, du vecteur définissant l'homothétie
+
+ + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
Cette transformation s'applique dans en 3 dimensions et ne peut pas être représentée sur le plan. sx000sy000sz sx0000sy0000sz00001
+ +

Exemples

+ +

Avec origine non modifiée

+ +

HTML

+ +
<p>foo</p>
+<p class="transformation">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
+  background-color: blue;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Avec_origine_non_modifiée","100%","200")}}

+ +

Avec origine translatée

+ +

HTML

+ +
<p>toto</p>
+<p class="transformation">truc</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scale3d(2, 3, 0);
+  transform-origin: center;
+  background-color: blue;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Avec_origine_translatée","100%","200")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Transforms 2", "#funcdef-scale3d", "scale3d()")}}{{Spec2("CSS Transforms 2")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

Voir la page sur le type de donnée <transform-function> pour les informations de compatibilité associées.

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf