perspective

  • Raccourci de la révision : CSS/perspective
  • Titre de la révision : perspective
  • ID de la révision : 295934
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La propriété CSS perspective détermine la distance entre le plan z=0 et l'utilisateur dans le but de donner du relief à un élément positionné en trois dimensions. Chaque élément en trois dimensions qui est situé entre le plan z=0 et l'utilisateur est agrandi , tandis que ceux situés dans le domane z<0 sont réduits. L'amplitude de la déformation est définie par cette propriété.

Les parties des éléments trois dimensions qui sont derrière l'utilisateur, c.-à-d. que la coordonnée en z est plus grande que la valeur de la propriété CSS perspective CSS, ne sont pas affichés.

Le point de fuite est placé au centre de l'élément par défaut, mais sa position peut facilement être modifiée en utilisant la propriété {{ cssxref("perspective-origin") }}.

Utiliser cette propriété avec une valeur différente de 0 et none créé un nouvel empilement de couches.

  • {{ Xref_cssinitial() }} : none
  • S'applique à :tout élément transformable
  • {{ Xref_cssinherited() }} : non
  • Média : {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} :le mot-clé none ou une {{ xref_csslength() }} absolue
  • {{ xref_cssanimatable() }} : ?
  • {{ xref_csscanonicalorder() }} : {{ Xref_cssuniqueorder() }}

Syntaxe

Grammaire formelle : none | <longueur>
perspective: none     ou
perspective: depth

Valeurs

none
Est un mot-clé indiquant qu'aucune transformation de perspective ne doit être appliquée.
depth
Est une {{ xref_csslength() }} donnant la distance entre l'utilisateur et le plan z=0. Elle est utilisée pour appliquer une transformation de perspective à l'élément et à sont contenu. Si la valeur est négative ou est 0, aucune transformation de perspective n'est appliquée.

Exemples

perspective:150px; perspective:300px; perspective:600px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6
   
1
2
3
4
5
6

Spécifications

Spécification État Commentaire
{{ Specname('CSS3 Transforms', '#perspective', 'perspective') }} {{ Spec2('CSS3 Transforms') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 12{{ property_prefix('-webkit') }} {{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}
{{ CompatGeckoDesktop("16") }}
10 {{ CompatNo() }} {{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base 3.0{{ property_prefix('-webkit') }} {{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}
{{ CompatGeckoMobile("16") }}
{{ CompatUnknown() }} {{ CompatNo() }} {{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}

Voir également

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Résumé</h2>
<p>La propriété CSS <code>perspective</code> détermine la distance entre le plan z=0 et l'utilisateur dans le but de donner du relief à un élément positionné en trois dimensions. Chaque élément en trois dimensions qui est situé entre le plan z=0 et l'utilisateur est agrandi , tandis que ceux situés dans le domane z&lt;0 sont réduits. L'amplitude de la déformation est définie par cette propriété.</p>
<p>Les parties des éléments trois dimensions qui sont derrière l'utilisateur, c.-à-d. que la coordonnée en z est plus grande que la valeur de la propriété CSS <code>perspective</code> CSS, ne sont pas affichés.</p>
<p>Le <em>point de fuite</em> est placé au centre de l'élément par défaut, mais sa position peut facilement être modifiée en utilisant la propriété {{ cssxref("perspective-origin") }}.</p>
<p>Utiliser cette propriété avec une valeur différente de <code>0</code> et <code>none</code> créé un nouvel <a href="/fr/docs/CSS/Comprendre_z-index/L'empilement_de_couches" title="en/CSS/Understanding_z-index/The_stacking_context">empilement de couches</a>.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }} :</dfn> <code>none</code></li>
  <li><dfn>S'applique à :</dfn>tout élément transformable</li>
  <li><dfn>{{ Xref_cssinherited() }} :</dfn> non</li>
  <li><dfn>Média :</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }} :</dfn>le mot-clé <code>none</code> ou une {{ xref_csslength() }} absolue</li>
  <li><dfn>{{ xref_cssanimatable() }} :</dfn> ?</li>
  <li><dfn>{{ xref_csscanonicalorder() }} :</dfn> {{ Xref_cssuniqueorder() }}</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntaxe</h2>
<pre class="twopartsyntaxbox">
Grammaire formelle : none | &lt;longueur&gt;</pre>
<pre>
perspective: none     <em>ou</em>
perspective: <span style="font-style: italic;">depth</span>
</pre>
<h3 id="Values">Valeurs</h3>
<dl>
  <dt style="margin-left: 40px;">
    <code>none</code></dt>
  <dd style="margin-left: 40px;">
    Est un mot-clé indiquant qu'aucune transformation de perspective ne doit être appliquée.</dd>
  <dt style="margin-left: 40px;">
    <em>depth</em></dt>
  <dd style="margin-left: 40px;">
    Est une {{ xref_csslength() }} donnant la distance entre l'utilisateur et le plan z=0. Elle est utilisée pour appliquer une transformation de perspective à l'élément et à sont contenu. Si la valeur est négative ou est <code>0</code>, aucune transformation de perspective n'est appliquée.</dd>
</dl>
<h2 id="Examples" name="Examples">Exemples</h2>
<div>
  <table class="standard-table">
    <tbody>
      <tr>
        <td><code>perspective:150px;</code></td>
        <td><code>perspective:300px;</code></td>
        <td><code>perspective:600px;</code></td>
      </tr>
      <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:150px;-moz-transform-style:preserve-3d;-moz-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 );">
                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 );">
                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 );">
                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 ); } ">
                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 );">
                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 );">
                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:300px;-moz-transform-style:preserve-3d;-moz-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 );">
                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 );">
                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 );">
                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 ); } ">
                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 );">
                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 );">
                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:600px;-moz-transform-style:preserve-3d;-moz-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 );">
                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 );">
                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 );">
                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 ); } ">
                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 );">
                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 );">
                6</div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Specifications" name="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ Specname('CSS3 Transforms', '#perspective', 'perspective') }}</td>
      <td>{{ Spec2('CSS3 Transforms') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>12{{ property_prefix('-webkit') }}</td>
        <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}<br />
          {{ CompatGeckoDesktop("16") }}</td>
        <td>10</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>3.0{{ property_prefix('-webkit') }}</td>
        <td>{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}<br />
          {{ CompatGeckoMobile("16") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">Voir également</h2>
<ul>
  <li><a href="/fr/docs/CSS/Utilisation_des_transformations_CSS" title="/en-US/docs/CSS/Using_CSS_transforms">Utilisation des transformations CSS</a></li>
  <li>{{ CSS_Reference:Transforms() }}</li>
</ul>
Revenir à cette révision