Visualização 3D

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.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: Tomaz-Vieira, pablobfonseca
 Última atualização por: Tomaz-Vieira,