Visualização 3D

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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.
  • 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.
  • 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.
  • E, é claro, isso parece incrível.

Veja também