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

<div class="warning">
<p>Начиная с Firefox 47, "3D view" больше недоступен.</p>
</div>

<p>Когда вы нажимаете на кнопку 3D просмотра, страница переходит в 3D режим. В нем вы можете видеть структуру блоков HTML, когда вложенные блоки находятся выше родительских.</p>

<p>Этот режим позволяет визуализировать структуру вашего контента.</p>

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

<p><span id="result_box" lang="ru"><span>Нажимая и перетаскивая представление, вы можете поворачивать и переориентировать трёхмерную презентацию иерархии DOM на своей странице, чтобы увидеть её под разными углами, чтобы лучше изучить её структуру.</span> <span>Элементы вне экрана становятся видимыми, чтобы вы могли видеть, где находятся ваши элементы по отношению к видимому контенту.</span> <span>Вы можете щёлкнуть по элементам, чтобы увидеть их HTML на панели HTML или на панели «Стиль».</span> <span>И наоборот, вы можете щёлкнуть элементы на панели поиска, чтобы изменить, какой элемент выбран в 3D-представлении.</span></span></p>

<p><span id="result_box" lang="ru"><span>Если вы не видите кнопку 3D в инспекторе страницы, возможно, что ваш графический драйвер нуждается в обновлении.</span> <span>Дополнительную информацию см. На странице драйверов.</span></span></p>

<h2 id="Управление">Управление</h2>

<p><span id="result_box" lang="ru"><span>Для 3D-просмотра доступны горячие клавиши.</span></span></p>

<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <td class="header">Function</td>
   <td class="header">Keyboard</td>
   <td class="header">Mouse</td>
  </tr>
  <tr>
   <td>Zoom in/out</td>
   <td><kbd>+</kbd> / <kbd>-</kbd></td>
   <td>Scroll wheel up/down</td>
  </tr>
  <tr>
   <td>Rotate left/right</td>
   <td><kbd>a</kbd> / <kbd>d</kbd></td>
   <td>Mouse left/right</td>
  </tr>
  <tr>
   <td>Rotate up/down</td>
   <td><kbd>w</kbd> / <kbd>s</kbd></td>
   <td>Mouse up/down</td>
  </tr>
  <tr>
   <td>Pan left/right</td>
   <td><kbd>←</kbd> / <kbd>→</kbd></td>
   <td>Mouse left/right</td>
  </tr>
  <tr>
   <td>Pan up/down</td>
   <td><kbd>↑</kbd> / <kbd>↓</kbd></td>
   <td>Mouse up/down</td>
  </tr>
  <tr>
   <td>Reset zoom level</td>
   <td><kbd>0</kbd></td>
   <td>Resets the zoom level to the default</td>
  </tr>
  <tr>
   <td>Focus on selected node</td>
   <td><kbd>f</kbd></td>
   <td>Makes sure the currently selected node is visible</td>
  </tr>
  <tr>
   <td>Reset view</td>
   <td><kbd>r</kbd></td>
   <td>Resets zoom, rotation, and panning to the default</td>
  </tr>
  <tr>
   <td>Hide current node</td>
   <td><kbd>x</kbd></td>
   <td>Makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured</td>
  </tr>
 </tbody>
</table>

<h2 id="Варианты_использования">Варианты использования</h2>

<p><span id="result_box" lang="ru"><span>Существует множество способов использования 3D-вида:</span></span></p>

<ul>
 <li><span id="result_box" lang="ru"><span>Если вы накосячили с  HTML-макетом, просмотр 3D-вида поможет найти, где вы налажали.</span> <span>Часто проблемы структур  вызваны неправильным вложением содержимого.</span> <span>Это будет более очевидным при использовании 3D-вида.</span></span></li>
 <li><span id="result_box" lang="ru"><span>Если контент не отображается, вы можете выяснить, почему;</span> <span>поскольку 3D-вид позволяет вам уменьшить масштаб, чтобы увидеть элементы, которые визуализируются за пределами видимой области страницы.</span></span></li>
 <li><span id="result_box" lang="ru"><span>Вы можете посмотреть, как структурирована ваша страница, чтобы понять, стоит ли её оптимизировать.</span></span></li>
 <li><strong>Ну и  ...  это  шщ-и-и-и-и-и-карно</strong>.</li>
</ul>

<h2 id="Смотреть_так_же">Смотреть так же:</h2>

<ul>
 <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
 <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
 <li>
  <div class="threecolumns">
  <p><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></p>
  </div>
 </li>
 <li><a href="/en/Tools" title="Tools">Tools</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>