Utilisation des transformations CSS

  • Raccourci de la révision : CSS/Utilisation_des_transformations_CSS
  • Titre de la révision : Utilisation des transformations CSS
  • ID de la révision : 338373
  • Créé :
  • Créateur : teoli
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

En modifiant l'espace des coordonnées, les transformations CSS 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 afines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.

Propriétés des transformations CSS

Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin')}}.

{{Cssxref("transform-origin")}}
Spécifie la position de l'origine. Par défaut, celle-ci est dans le coin supérieur gauche 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.
{{cssxref("transform")}}
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 requit par l'opération de composition.

Exemples

Exemple : rotation

Cet exemple créé un iframe qui utilise la page d'accueil de Google, tournée à 90 degrés par rapport à son coin inférieur gauche.

Afficher l'exemple en direct Afficher les captures d'écrans de l'exemple

<div style="transform: rotate(90deg); transform-origin: bottom left;">
  <iframe src="http://www.google.com/" width="500" height="600"></iframe>
</div>

Exemple :  inclinaison et translation

Cet exemple créé un iframe qui utilise la page d'accueil de Google, inclinée à 10 degrés et translatée de 150 pixels sur l'axe X.

Afficher l'exemple en direct  Afficher les capturs d'écran de l'exemple

<div style="transform: skewx(10deg) translatex(150px);
            transform-origin: bottom left;">
  <iframe src="http://www.google.com/" width="600" height="500"></iframe>
</div>

Propriétés CSS spécifiques 3D

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.

Définir une perspective

Le premier élément à définir est la perspective. 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.

La rapidité avec laquelle ils rétrécissent est définie par la propriété {{cssxref("perspective")}}. Plus la valeur est petite, plus la perspective est profonde.

perspective:0; perspective:250px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6
perspective:300px; perspective:350px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6

Le second élément à configurer est la position de l'observateur, grâce à la propriété {{cssxref("transform-origin")}}. Par défaut, la pespective est centrée sur l'observateur, ce qui n'est pas toujours idéal.

perspective-origin:150px 150px; perspective-origin:50% 50%; perspective-origin:-50px -50px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6
   
1
2
3
4
5
6

Une fois que vous avez fait cela, vous pouvez travailler sur l'élément dans l'espace 3D.

Voir également

  • {{Css_Reference:Transforms()}}

Source de la révision

<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 afines 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>
<h2 id="Propri.C3.A9t.C3.A9s_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 dans le coin supérieur gauche 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 requit par l'opération de composition.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_.3A_rotation">Exemple : rotation</h3>
<p>Cet exemple créé un iframe qui utilise la page d'accueil de Google, tournée à 90 degrés par rapport à son coin inférieur gauche.</p>
<p><a class="button liveSample" href="/@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">Afficher l'exemple en direct</a> <a class="button liveSample" href="/@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">Afficher les captures d'écrans de l'exemple</a></p>
<pre class="brush: html">
&lt;div style="transform: rotate(90deg); transform-origin: bottom left;"&gt;
  &lt;iframe src="http://www.google.com/" width="500" height="600"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</pre>
<h3 id="Exemple_.3A.C2.A0_inclinaison_et_translation">Exemple :&nbsp; inclinaison et translation</h3>
<p>Cet exemple créé un iframe qui utilise la page d'accueil de Google, inclinée à 10 degrés et translatée de 150 pixels sur l'axe X.</p>
<p><a class="button liveSample" href="/@api/deki/files/2922/=skewed-google-sample.html" title="http://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">Afficher l'exemple en direct</a>&nbsp; <a class="button liveSample" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">Afficher les capturs d'écran de l'exemple</a></p>
<pre class="brush: html">
&lt;div style="transform: skewx(10deg) translatex(150px);
            transform-origin: bottom left;"&gt;
  &lt;iframe src="http://www.google.com/" width="600" height="500"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</pre>
<h2 id="Propri.C3.A9t.C3.A9s_CSS_sp.C3.A9cifiques_3D">Propriétés CSS spécifiques 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.C3.A9finir_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>La rapidité avec laquelle ils rétrécissent est définie par la propriété {{cssxref("perspective")}}. Plus la valeur est petite, plus la perspective est profonde.</p>
<table class="standard-table">
  <thead>
    <tr>
      <th><code>perspective:0;</code></th>
      <th><code>perspective:250px;</code></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="container" style="width:200px;height:200px;margin:75px 0 0 75px;border:none;">
          <div class="cube" style="width:100%;height:100%;-moz-perspective:0;-webkit-perspective:0;perspective:0;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-moz-perspective-origin:150% 150%;-webkit-perspective-origin:150% 150%;perspective-origin:150% 150%">
            <div class="middle" style="display: block;position: absolute;width: 100px;height: 100px;border: 1px dashed black;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: transparent;">
              &nbsp; &nbsp;</div>
            <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );-webkit-transform: translateZ( 50px );transform:translateZ(50px)">
              1</div>
            <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );-webkit-transform: translateZ( -50px );transforme:translateZ(-50px)">
              2</div>
            <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );-webkit-transform: rotateY( 90deg) translateZ( 50px );transform:rotateY(90deg) translateZ(50px)">
              3</div>
            <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );-webkit-transform: rotateY(-90deg) translateZ( 50px );transform:rotateY(-90deg) translateZ(50px)">
              4</div>
            <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );-webkit-transform: rotateX( 90deg) translateZ( 50px );transform:rotateX(90deg) translateZ(50px)">
              5</div>
            <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );-webkit-transform: rotateX( -90deg) translateZ( 50px );transform:rotateX(-90deg) translateZ(50px)">
              6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container" style="width:200px;height:200px;margin:75px 0 0 75px;border:none;">
          <div class="cube" style="width:100%;height:100%;-moz-perspective:250px;-webkit-perspective:250px;perspective:250px;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-moz-perspective-origin:150% 150%;-webkit-perspective-origin:150% 150%;perspective-origin:150% 150%">
            <div class="middle" style="display: block;position: absolute;width: 100px;height: 100px;border: 1px dashed black;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: transparent;">
              &nbsp; &nbsp;</div>
            <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );-webkit-transform: translateZ( 50px );transform:translateZ(50px)">
              1</div>
            <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );-webkit-transform: translateZ( -50px );transforme:translateZ(-50px)">
              2</div>
            <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );-webkit-transform: rotateY( 90deg) translateZ( 50px );transform:rotateY(90deg) translateZ(50px)">
              3</div>
            <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );-webkit-transform: rotateY(-90deg) translateZ( 50px );transform:rotateY(-90deg) translateZ(50px)">
              4</div>
            <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );-webkit-transform: rotateX( 90deg) translateZ( 50px );transform:rotateX(90deg) translateZ(50px)">
              5</div>
            <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );-webkit-transform: rotateX( -90deg) translateZ( 50px );transform:rotateX(-90deg) translateZ(50px)">
              6</div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<table class="standard-table">
  <thead>
    <tr>
      <th><code>perspective:300px;</code></th>
      <th><code>perspective:350px;</code></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="container" style="width:200px;height:200px;margin:75px 0 0 75px;border:none;">
          <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:150% 150%;perspective:300px;transform-style:preserve-3d;perspective-origin:150% 150%">
            <div class="middle" style="display: block;position: absolute;width: 100px;height: 100px;border: 1px dashed black;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: transparent;">
              &nbsp; &nbsp;</div>
            <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );-webkit-transform: translateZ( 50px );transform:translateZ(50px)">
              1</div>
            <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );-webkit-transform: translateZ( -50px );transforme:translateZ(-50px)">
              2</div>
            <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );-webkit-transform: rotateY( 90deg) translateZ( 50px );transform:rotateY(90deg) translateZ(50px)">
              3</div>
            <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );-webkit-transform: rotateY(-90deg) translateZ( 50px );transform:rotateY(-90deg) translateZ(50px)">
              4</div>
            <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );-webkit-transform: rotateX( 90deg) translateZ( 50px );transform:rotateX(90deg) translateZ(50px)">
              5</div>
            <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );-webkit-transform: rotateX( -90deg) translateZ( 50px );transform:rotateX(-90deg) translateZ(50px)">
              6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container" style="width:200px;height:200px;margin:75px 0 0 75px;border:none;">
          <div class="cube" style="width:100%;height:100%;-moz-perspective:350px;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;-webkit-perspective:350px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:150% 150%;perspective:350px;transform-style:preserve-3d;perspective-origin:150% 150%">
            <div class="middle" style="display: block;position: absolute;width: 100px;height: 100px;border: 1px dashed black;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: transparent;">
              &nbsp; &nbsp;</div>
            <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );-webkit-transform: translateZ( 50px );transform:translateZ(50px)">
              1</div>
            <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );-webkit-transform: translateZ( -50px );transforme:translateZ(-50px)">
              2</div>
            <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );-webkit-transform: rotateY( 90deg) translateZ( 50px );transform:rotateY(90deg) translateZ(50px)">
              3</div>
            <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );-webkit-transform: rotateY(-90deg) translateZ( 50px );transform:rotateY(-90deg) translateZ(50px)">
              4</div>
            <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );-webkit-transform: rotateX( 90deg) translateZ( 50px );transform:rotateX(90deg) translateZ(50px)">
              5</div>
            <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );-webkit-transform: rotateX( -90deg) translateZ( 50px );transform:rotateX(-90deg) translateZ(50px)">
              6</div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<p>Le second élément à configurer est la position de l'observateur, grâce à la propriété {{cssxref("transform-origin")}}. Par défaut, la pespective est centrée sur l'observateur, ce qui n'est pas toujours idéal.</p>
<div>
  <table class="standard-table">
    <thead>
      <tr>
        <th><code>perspective-origin:150px 150px;</code></th>
        <th><code>perspective-origin:50% 50%;</code></th>
        <th><code>perspective-origin:-50px -50px;</code></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:150% 150%;perspective:300px;transform-style:preserve-3d;perspective-origin:150% 150%">
              <div class="middle" style="display: block;position: absolute;width: 100px;height: 100px;border: 1px dashed black;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: transparent;">
                &nbsp; &nbsp;</div>
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );-webkit-transform: translateZ( 50px );transform:translateZ(50px)">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );-webkit-transform: translateZ( -50px );transforme:translateZ(-50px)">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );-webkit-transform: rotateY( 90deg) translateZ( 50px );transform:rotateY(90deg) translateZ(50px)">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );-webkit-transform: rotateY(-90deg) translateZ( 50px );transform:rotateY(-90deg) translateZ(50px)">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );-webkit-transform: rotateX( 90deg) translateZ( 50px );transform:rotateX(90deg) translateZ(50px)">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );-webkit-transform: rotateX( -90deg) translateZ( 50px );transform:rotateX(-90deg) translateZ(50px)">
                6</div>
            </div>
          </div>
        </td>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:50% 50%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:50% 50%;perspective:300px;transform-style:preserve-3d;perspective-origin:50% 50%">
              <div class="middle" style="display: block;position: absolute;width: 100px;height: 100px;border: 1px dashed black;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: transparent;">
                &nbsp; &nbsp;</div>
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );-webkit-transform: translateZ( 50px );transform:translateZ(50px)">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );-webkit-transform: translateZ( -50px );transforme:translateZ(-50px)">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );-webkit-transform: rotateY( 90deg) translateZ( 50px );transform:rotateY(90deg) translateZ(50px)">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );-webkit-transform: rotateY(-90deg) translateZ( 50px );transform:rotateY(-90deg) translateZ(50px)">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );-webkit-transform: rotateX( 90deg) translateZ( 50px );transform:rotateX(90deg) translateZ(50px)">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );-webkit-transform: rotateX( -90deg) translateZ( 50px );transform:rotateX(-90deg) translateZ(50px)">
                6</div>
            </div>
          </div>
        </td>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:-50% -50%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:-50% -50%;perspective:300px;transform-style:preserve-3d;perspective-origin:-50% -50%">
              <div class="middle" style="display: block;position: absolute;width: 100px;height: 100px;border: 1px dashed black;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: transparent;">
                &nbsp; &nbsp;</div>
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );-webkit-transform: translateZ( 50px );transform:translateZ(50px)">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );-webkit-transform: translateZ( -50px );transforme:translateZ(-50px)">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );-webkit-transform: rotateY( 90deg) translateZ( 50px );transform:rotateY(90deg) translateZ(50px)">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );-webkit-transform: rotateY(-90deg) translateZ( 50px );transform:rotateY(-90deg) translateZ(50px)">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );-webkit-transform: rotateX( 90deg) translateZ( 50px );transform:rotateX(90deg) translateZ(50px)">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );-webkit-transform: rotateX( -90deg) translateZ( 50px );transform:rotateX(-90deg) translateZ(50px)">
                6</div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<p>Une fois que vous avez fait cela, vous pouvez travailler sur l'élément dans l'espace 3D.</p>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>{{Css_Reference:Transforms()}}</li>
</ul>
Revenir à cette révision