---
title: Vue 3D
slug: Outils/Vue_3D
tags:
  - HTML
  - Tools
translation_of: Tools/3D_View
---
<div>{{ToolsSidebar}}</div>

<div class="warning">
<p>Depuis Firefox 47, la Vue 3D n'est plus disponible.</p>
</div>

<p>Lorsque vous cliquez sur le bouton Vue 3D, la page passe en mode Vue 3D ; dans ce mode, vous pouvez voir votre page présentée dans une vue 3D dans laquelle les blocs imbriqués de HTML sont de plus en plus " hauts ", se projetant vers l'extérieur depuis le bas de la page. Cette vue facilite la visualisation de l'imbrication de votre contenu.</p>

<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p>

<p>En cliquant et en glissant sur la vue, vous pouvez faire tourner et réorienter la présentation 3D de la hiérarchie de DOM de votre page pour le voir d'angles différents, mieux examiner sa structure. Hors de l'image, les éléments deviennent visibles pour que vous puissiez voir où vos éléments sont placés par rapport au contenu visible. Vous pouvez cliquer sur des éléments pour voir leur code HTML dans l'inspecteur HTML ou l'inspecteur de Style. Au contraire, vous pouvez cliquer sur des éléments dans l'inspecteur pour changer quel élément est choisi dans la vue 3D.</p>

<p>Si vous ne voyez pas le bouton 3D dans l'inspecteur de page, il est possible que votre navigateur graphique doive être mis à jour.</p>

<h2 id="Contrôle_de_la_vue_3D">Contrôle de la vue 3D</h2>

<p>Il y a des raccourcis claviers et des touches avec la souris pour contrôler la vue 3D.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Fonction</td>
   <td class="header">Clavier</td>
   <td class="header">Souris</td>
  </tr>
  <tr>
   <td>Zoom plus/moins</td>
   <td><kbd>+</kbd> / <kbd>-</kbd></td>
   <td>Mollette vers le haut/bas</td>
  </tr>
  <tr>
   <td>Rotation gauche/droite</td>
   <td><kbd>a</kbd> / <kbd>d</kbd></td>
   <td>Faire glisser vers la gauche/droite</td>
  </tr>
  <tr>
   <td>Rotation haut/bas</td>
   <td><kbd>w</kbd> / <kbd>s</kbd></td>
   <td>Faire glisser versle haut/bas</td>
  </tr>
  <tr>
   <td>Se déplacer vers la gauche/droite</td>
   <td><kbd>←</kbd> / <kbd>→</kbd></td>
   <td>Souris à gauche/droite</td>
  </tr>
  <tr>
   <td>Se déplacer vers le haut/bas</td>
   <td><kbd>↑</kbd> / <kbd>↓</kbd></td>
   <td>Souris en haut/bas</td>
  </tr>
  <tr>
   <td>Remettre le zoom par défaut</td>
   <td><kbd>0</kbd></td>
   <td>Remet le taux d'agrandissement par défaut</td>
  </tr>
  <tr>
   <td>Mettre le bloc sélectionné visible</td>
   <td><kbd>f</kbd></td>
   <td>Rend le bloc sélectionné visible {{ fx_minversion_inline("13.0") }}</td>
  </tr>
  <tr>
   <td>Remettre la vue par défaut</td>
   <td><kbd>r</kbd></td>
   <td>Remet le zoom, la rotation et le déplacement par défaut{{ fx_minversion_inline("12.0") }}</td>
  </tr>
  <tr>
   <td>Masquer le bloc</td>
   <td><kbd>x</kbd></td>
   <td>Rend le bloc invisible, ce qui est pratique lorsqu'un bloc en dessous est caché. {{ fx_minversion_inline("12.0") }}</td>
  </tr>
 </tbody>
</table>

<h2 id="Causes_de_lutilisation_de_la_Vue_3D">Causes de l'utilisation de la Vue 3D</h2>

<p>Il y a différentes façons la vue 3D est utile :</p>

<ul>
 <li>Si vous avez modifié le HTML causant des problèmes de disposition, en regardant avec la vue 3D peut vous aidez à trouver où vous vous êtes trompés. Souvent, les problèmes de disposition sont causés dans l'emboîtement incorrect de contenu. Ceci peut devenir beaucoup plus évident en utilisant la vue 3D et voyant où vos éléments sont mal emboîtés.</li>
 <li>Si le contenu ne s'affiche pas, vous pouvez comprendre pourquoi; puisque la vue 3D vous laisse faire un zoom arrière pour voir les éléments qui rendent à l'extérieur de la zone visible de la page, vous pouvez trouver le contenu perdu cette façon.</li>
 <li>Vous pouvez obtenir un regard pour savoir comment votre page est structurée, pour voir s'il peut y avoir des façons d'optimiser votre disposition.</li>
 <li>Et, bien sûr, parce que c'est stupéfiant.</li>
</ul>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/Tools/Page_Inspector" title="Page Inspector">Inspecteur</a></li>
 <li><a href="/fr/Tools/Page_Inspector/HTML_panel" title="HTML panel">Panneau HTML</a></li>
 <li><a href="/fr/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Panneau Style</a></li>
 <li><a href="/fr/Tools" title="Outils">Outils</a></li>
 <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">Nouveaux outils de développement dans Firefox 11 Aurora</a> (blog post)</li>
</ul>