---
title: 三维视图
slug: Tools/Page_Inspector/3D_view
translation_of: Tools/3D_View
---
<div>{{ToolsSidebar}}</div>

<div class="warning">
<p>三维视图在 Firefox 47 被移除。</p>
</div>

<p>{{ fx_minversion_header("11") }}</p>

<p>当你点击"三维视图"按钮之后,当前页面会进入三维视图模式,在该模式中, 页面中的HTML嵌套结构,会以图形化的方式,由外到内,从页面底部一级一级凸显出来. 这种视图可以让你很容易的看清楚页面的嵌套结构.</p>

<p><img alt="3dview.png" class="default internal" src="/@api/deki/files/6123/=3dview.png"></p>

<p>按住左键拖拽视图, 你可以旋转整个页面,从不同的角度查看页面的DOM层次,理清页面的结构. 页面显示区域以外的元素也变为可见状态,你能看到这些游离元素相对于页面可见区域所处的位置. 你可以点击区块选择对应的元素,该元素对应的HTML和CSS会在 <a href="/zh-cn/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML面板</a>和<a href="/zh-cn/Tools/Page_Inspector/Style_panel" title="Style panel">Style面板</a>显示出来.反回来, 你也可以在HTML面板中点击所要查看的元素,该元素也会在三维视图中成为被选择状态.</p>

<p>如果你的页面查看器里没有三维视图按钮,则最有可能的原因是你的显卡驱动需要更新了. 查看<a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a>了解更多信息.</p>

<h2 id="控制三维视图">控制三维视图</h2>

<p>通过键盘快捷键和鼠标操作可以控制三维视图的显示模式.</p>

<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <td class="header">功能</td>
   <td class="header">键盘快捷键 </td>
   <td class="header">鼠标操作</td>
  </tr>
  <tr>
   <td>放大/缩小</td>
   <td>+/-             </td>
   <td>滚轮向上/向下滚动</td>
  </tr>
  <tr>
   <td>向左/向右旋转</td>
   <td>a / d</td>
   <td>按住左键向左/向右拖动</td>
  </tr>
  <tr>
   <td>向上/向下旋转</td>
   <td>w / s</td>
   <td>按住左键向上/向下拖动</td>
  </tr>
  <tr>
   <td>向左/向右平移</td>
   <td>← / →</td>
   <td>按住右键向左/向右拖动</td>
  </tr>
  <tr>
   <td>向上/向下平移</td>
   <td>↑ / ↓</td>
   <td>按住右键向上/向下拖动</td>
  </tr>
  <tr>
   <td>重置放大级别到默认状态</td>
   <td>0</td>
   <td>无</td>
  </tr>
  <tr>
   <td>将焦点转移到当前选择的节点,确保当前选择的节点是可见的{{ fx_minversion_inline("13.0") }}</td>
   <td>f</td>
   <td>无</td>
  </tr>
  <tr>
   <td>重置整个视图到默认状态(放大级别,旋转角度,移动位置等){{ fx_minversion_inline("12.0") }}</td>
   <td>r</td>
   <td>无</td>
  </tr>
  <tr>
   <td>隐藏当前选择的节点,确保当前选择的节点是不可见的, 这样可以看到下层被遮挡的节点{{ fx_minversion_inline("12.0") }}</td>
   <td>x</td>
   <td>无</td>
  </tr>
 </tbody>
</table>

<h2 id="三维视图的用途">三维视图的用途</h2>

<p>三维视图在很多种情形下都会派上用场:</p>

<ul>
 <li>如果一些结构不良好的HTML引起了页面的布局问题, 三维视图可能能够帮你找到问题所在. 通常情况下,布局问题是由页面内容的嵌套错误引起的.在三维视图下,嵌套错误的那些元素可以比较明显的被显示出来.</li>
 <li>如果一个元素没有显示在页面上,你会希望能够快速的找到问题所在.三维视图提供了缩小页面显示的功能,可以显示出那些正常情况下页面可见区域之外的元素, 所以你可以通过这种方法找到那些游离的无法显示的元素.</li>
 <li>可以查看你的页面结构,找到如何优化页面布局的方法.</li>
 <li>当然,还有一点,就是它看起来很炫.</li>
</ul>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li><a href="/zh-cn/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
 <li><a href="/zh-cn/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
 <li><a href="/zh-cn/Tools/Page_Inspector/Style_panel" title="zh-cn/Tools/Page_Inspector/Style panel">Style panel</a></li>
 <li><a href="/zh-cn/Tools" title="Tools">Tools</a></li>
 <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="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", "en": "en/Tools/Page_Inspector/3D_view"} ) }}</p>