Esta tradução está incompleta. Ajude atraduzir este artigo.
A partir da versão 47 do Firefox, a visualização 3D não estará mais disponível.
Existe um complemento que implementa essa funcionalidade (Tilt 3D), mas que não funciona com o Firefox multiprocesso
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.
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 painel de HTML ou no painel de Estilo. Reciprocamente, você também pode clicar em elementos da barra de breadcrumbs para selecionar sua representação 3D.
Se você estiver rodando uma versão do Firefox inferior ao 47 e não encontrar o botão 3D no inspetor de página, é possível que você tenha que atualizar seus drivers de vídeo. Para mais informações, leia a lista de drivers bloqueados.
Controlando a visualização 3D
Existem teclas de atalho e controles do mouse disponívies para a visualização 3D.
| Função | Teclado | Mouse |
| Zoom dentro/fora | + / - | Role a roda cima/baixo |
| Rotacionar esquerda/direita | a / d | Mouse esquerda/direita |
| Rotacionar cima/baixo | w / s | Mouse cima/baixo |
| Pan esquerda/direita | ← / → | Mouse esquerda/direita |
| Pan cima/baixo | ↑ / ↓ | Mouse cima/baixo |
| Resetar level de zoom | 0 | Reseta o zoom por padrão |
| Foco no nó selecionado | f | Garante que o nó selecionado atualmente está visível |
| Resetar visualização | r | Redefine zoom, rotação e panorâmica para o padrão |
| Esconde o nó atual | x | Faz com que o nó selecionado atualmente fique invisível; Isso pode ser útil se você precisa chegar a um nó que está obscuro |
Casos de uso para a visualização 3D
Há uma variedade de casos que a visualização 3D é útil:
- 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.
- If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.
- You can get a look at how your page is structured to see if there may be ways to optimize your layout.
- And, of course, it looks awesome.