initial commit

2 files changed, 145 insertions, 0 deletions

diff --git a/files/fr/web/css/css_transforms/index.html b/files/fr/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..66190eedac
--- /dev/null
+++ b/files/fr/web/css/css_transforms/index.html
@@ -0,0 +1,62 @@
+---
+title: CSS Transforms
+slug: Web/CSS/CSS_Transforms
+tags:
+  - Aperçu
+  - CSS
+  - CSS Transforms
+  - Reference
+translation_of: Web/CSS/CSS_Transforms
+---
+<div>{{CSSRef}}</div>
+
+<p>Le module <em><strong>CSS Transforms</strong></em> (ou module des transformations CSS) est un module de la spécification CSS qui définit comment les éléments mis en forme avec CSS peuvent être transformés dans un espace à deux ou à trois dimensions.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backface-visibility")}}</li>
+ <li>{{cssxref("perspective")}}</li>
+ <li>{{cssxref("perspective-origin")}}</li>
+ <li>{{cssxref("rotate")}}</li>
+ <li>{{cssxref("scale")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-box")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("transform-style")}}</li>
+ <li>{{cssxref("translate")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée">Types de donnée</h3>
+
+<p>{{cssxref("&lt;transform-function&gt;")}}</p>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></dt>
+ <dd>Un tutoriel pas-à-pas pour manipuler des transformations sur des éléments mis en forme avec CSS.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html b/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html
new file mode 100644
index 0000000000..c33a7e3ac9
--- /dev/null
+++ b/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html
@@ -0,0 +1,83 @@
+---
+title: Utilisation des transformations CSS
+slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS
+tags:
+  - 3D
+  - Avancé
+  - CSS
+  - Guide
+  - Mise à l'échelle
+  - Scale
+  - Transformations CSS
+  - perspective
+  - rotation
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+<div>{{CSSRef}}</div>
+
+<p>En modifiant l'espace des coordonnées, les <strong>transformations CSS</strong> permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Seuls les éléments positionnés selon <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">le modèle de boîtes</a> peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec <code>display: block</code> est positionné selon le modèle de boîtes.</p>
+</div>
+
+<h2 id="Propriétés_des_transformations_CSS">Propriétés des transformations CSS</h2>
+
+<p>Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.</p>
+
+<dl>
+ <dt>{{cssxref("transform-origin")}}</dt>
+ <dd>Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.</dd>
+ <dt>{{cssxref("transform")}}</dt>
+ <dd>Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici une version originale du logo MDN :</p>
+
+<p><img alt="MDN Logo" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png" style="height: 106px; width: 110px;"></p>
+
+<h3 id="Rotation">Rotation</h3>
+
+<p>Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :</p>
+
+<pre class="brush: html">&lt;img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Rotation','auto',240)}}</p>
+
+<h3 id="Distorsion_et_translation">Distorsion et translation</h3>
+
+<p>Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :</p>
+
+<pre class="brush: html">&lt;img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Distorsion_et_translation')}}</p>
+
+<h2 id="Propriétés_CSS_spécifiques_à_la_3D">Propriétés CSS spécifiques à la 3D</h2>
+
+<p>Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.</p>
+
+<h3 id="Définir_une_perspective">Définir une perspective</h3>
+
+<p>Le premier élément à définir est la <em>perspective.</em> La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.</p>
+
+<p>{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}</p>
+
+<p>Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.</p>
+
+<p>{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation with 3D Transforms">Utiliser <code>deviceorientation</code> avec les transformations 3D</a></li>
+ <li><a href="https://desandro.github.com/3dtransforms/" title="http://desandro.github.com/3dtransforms/">Une introduction aux transformations CSS, un billet de David DeSandro (en anglais)</a></li>
+ <li><a href="https://css-transform.moro.es/">CSS Transform playground (outil en ligne qui permet de visualiser des transformations CSS)</a></li>
+</ul>