---
title: Visualização 3D
slug: Tools/3D_View
tags:
  - Descontinuado
  - Desenvolvimento Web
  - Ferramentas
  - HTML
translation_of: Tools/3D_View
---
<div>{{ToolsSidebar}}</div>

<div class="warning">
<p>A partir da versão 47 do Firefox, a visualização 3D não estará mais disponível.</p>

<p>Existe um complemento que implementa essa funcionalidade (<a href="https://addons.mozilla.org/firefox/addon/tilt/">Tilt 3D</a>), mas que não funciona com o <a href="/pt-BR/docs/Mozilla/Firefox/Multiprocess_Firefox">Firefox multiprocesso</a></p>
</div>

<p>Quando você clica no botão de visualização 3D, a página vai para o modo de visualização 3D; neste modo, você pode ver sua página apresentada em uma exibição 3D no qual os blocos HTML aninhados estão cada vez mais "alto", projetando para fora a parte inferior da página. Essa visualização faz com que fique mais fácil para visualizar seus conteúdos aninhados.</p>

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

<p>Você pode visualizar a representação do DOM (Document Object Model) de diferentes ângulos, clicando e arrastando sua representação 3D. Elementos que se encontram fora da tela tornam-se visíveis nesta forma de visualização, de forma que você possa ver onde eles estão localizados em relação aos outros elementos. Você pode clicar em qualquer elemento para ver seu código HTML no <a href="/pt-BR/docs/Tools/Page_Inspector#HTML_pane">painel de HTML</a> ou no <a href="/en/Tools/Page_Inspector/Style_panel">painel de Estilo</a>. Reciprocamente, você também pode clicar em elementos da barra de breadcrumbs para selecionar sua representação 3D.</p>

<p>Se você estiver rodando uma versão do Firefox inferior ao 47 e não encontrar o botão 3D no <a href="/pt/Tools/Page_Inspector">inspetor de página</a>, é possível que você tenha que atualizar seus drivers de vídeo. Para mais informações, leia a <a href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">lista de drivers bloqueados</a>.</p>

<h2 id="Controlando_a_visualização_3D">Controlando a visualização 3D</h2>

<p>Existem teclas de atalho e controles do mouse disponívies para a visualização 3D.</p>

<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <td class="header">Função</td>
   <td class="header">Teclado</td>
   <td class="header">Mouse</td>
  </tr>
  <tr>
   <td>Zoom dentro/fora</td>
   <td>+ / -</td>
   <td>Role a roda cima/baixo</td>
  </tr>
  <tr>
   <td>Rotacionar esquerda/direita</td>
   <td>a / d</td>
   <td>Mouse esquerda/direita</td>
  </tr>
  <tr>
   <td>Rotacionar cima/baixo</td>
   <td>w / s</td>
   <td>Mouse cima/baixo</td>
  </tr>
  <tr>
   <td>Pan esquerda/direita</td>
   <td>← / →</td>
   <td>Mouse esquerda/direita</td>
  </tr>
  <tr>
   <td>Pan cima/baixo</td>
   <td>↑ / ↓</td>
   <td>Mouse cima/baixo</td>
  </tr>
  <tr>
   <td>Resetar level de zoom</td>
   <td>0</td>
   <td>Reseta o zoom por padrão</td>
  </tr>
  <tr>
   <td>Foco no nó selecionado</td>
   <td>f</td>
   <td>Garante que o nó selecionado atualmente está visível</td>
  </tr>
  <tr>
   <td>Resetar visualização</td>
   <td>r</td>
   <td>Redefine zoom, rotação e panorâmica para o padrão</td>
  </tr>
  <tr>
   <td>Esconde o nó atual</td>
   <td>x</td>
   <td>Faz com que o nó selecionado atualmente fique invisível; Isso pode ser útil se você precisa chegar a um nó que está obscuro</td>
  </tr>
 </tbody>
</table>

<h2 id="Casos_de_uso_para_a_visualização_3D">Casos de uso para a visualização 3D</h2>

<p>Há uma variedade de casos que a visualização 3D é útil:</p>

<ul>
 <li>Se você quebrou o HTML causando problemas de layout, olhando para a visualização 3D pode ajudar você a encontrar onde você errou. Frequentemente, problemas de layout são causados por aninhamento incorreto de conteúdo. Isso pode se tornar muito mais obvio quando olhar para a visualização 3D e ver onde seus elementos estão aninhados incorretamente.</li>
 <li>Se o conteúdo não estiver sendo exibido, você poderá descobrir o motivo; A visualização 3D permite diminuir o zoom para poder visualizar os elementos que estão sendo renderizados fora da área de visualização da página, dessa maneira você pode encontrar o conteúdo perdido.</li>
 <li>Você pode obter uma visualização de como a sua página está estruturada para ver se existem outras maneiras de otimizar o seu layout.</li>
 <li>E, é claro, isso parece <strong>incrível</strong>.</li>
</ul>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Inspetor de página</a></li>
 <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">Painel HTML</a></li>
 <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Painel de estilos</a></li>
 <li><a href="/en/Tools" title="Tools">Ferramentas</a></li>
 <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
</ul>

<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p>