Firefox 是否还有 3D DOM 查看器?

Mil*_*ing 82 firefox

我似乎无法弄清楚 Firefox 中曾经存在的这个小功能。

早期版本的开发工具中的 3D 按钮不见了,我似乎在任何地方都找不到此功能的任何痕迹。如果它仍然存在,我该如何启用它?

Jas*_*ler 70

直到 Firefox 版本 47:如果您右键单击并选择“检查元素”,然后单击工具箱菜单左侧的齿轮图标,您应该会看到“可用的工具箱按钮”,其下方会出现“3D 视图”。

在此处输入图片说明

单击此按钮将向工具箱菜单添加一个新图标,单击该图标时将显示 3D Dom 视图。

在此处输入图片说明

  • 看起来它已经从 Firefox 开发者版中完全删除了。真是太可惜了,因为它确实将它与 Chrome 区分开来。 (26认同)
  • “从 Firefox 47 开始,3D 视图不再可用。有一个附加组件提供相同的功能:Tilt 3D。但是,请注意,就像内置版本一样,该附加组件在多进程 Firefox 中不起作用.” 来源:https://developer.mozilla.org/en-US/docs/Tools/3D_View (12认同)
  • 你是对的,这个答案自 FF 47 以来已经过时,@ThorOdinson 下面的答案应该是被接受的。[倾斜 3D](https://addons.mozilla.org/en-US/firefox/addon/tilt/) 效果很好 (4认同)
  • 我在回答问题时使用的版本中默认没有启用它。 (3认同)
  • 他们为什么要这样埋?令人沮丧的用户体验。 (3认同)

Rah*_*Jha 30

从 Firefox 47 开始,内置 3D 视图不再可用。

有一个提供相同功能的附加组件:Tilt 3D

注意:就像内置版本一样,附加组件在多进程 Firefox 中不起作用。

Tilt 3D 与 Firefox Quantum 不兼容。

  • @serup ,你是对的,但我找不到任何其他选择。如果您找到任何,请告诉我们。 (2认同)

小智 8

转到:首选项->常规 取消选中“启用多进程 Firefox 开发者版”

重启火狐

转到:开发人员工具栏 [工具箱选项],“3D 视图”复选框现在应显示在“可用工具箱按钮”下,确保选中此项并且您很好。


小智 7

我知道这个问题与 FireFox 有关,但您也可以在 Chrome 中获得此功能(Firefox 不会让您将 JS 作为书签插入):

3D 视图 Chrome

将此 javascript 代码添加为书签网址:

javascript:void function(b,p)%7Bfunction l(k,c,b,e,g,d,f)%7Breturn"<div style%3D%27position:absolute%3B-webkit-transform-origin: 0 0 0%3B"%2B("background:"%2Bf%2B"%3B")%2B("width:"%2Be%2B"px%3B height:"%2Bg%2B"px%3B")%2B("-webkit-transform:"%2B("translate3d("%2Bk%2B"px,"%2Bc%2B"px,"%2Bb%2B"px)")%2B("rotateX(270deg) rotateY("%2Bd%2B"deg)")%2B"%3B")%2B"%27></div>"%7Dfunction o(k,c,d,f)%7Bfor(var j%3Dk.childNodes,n%3Dj.length,m%3D0%3Bm<n%3Bm%2B%2B)%7Bvar a%3Dj%5Bm%5D%3Bif(1%3D%3D%3Da.nodeType)%7Ba.style.overflow%3D"visible"%3Ba.style.WebkitTransformStyle%3D"preserve-3d"%3Ba.style.WebkitTransform%3D"translateZ("%2B(b%2B(n-m)*q).toFixed(3)%2B"px)"%3Bvar h%3Dd,i%3Df%3Ba.offsetParent%3D%3D%3Dk%26%26(h%2B%3Dk.offsetLeft,i%2B%3Dk.offsetTop)%3Bo(a,c%2B1,h,i)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop,(c%2B1)*b,a.offsetWidth,b,0,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft%2Ba.offsetWidth,i%2Ba.offsetTop,(c%2B1)*b,a.offsetHeight,b,270,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop%2Ba.offsetHeight,(c%2B1)*b,a.offsetWidth,b,0,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop,(c%2B1)*b,a.offsetHeight,b,270,g%5Bc%25(g.length-1)%5D)%7D%7D%7Dvar g%3D"%23C33,%23ea4c88,%23663399,%230066cc,%23669900,%23ffcc33,%23ff9900,%23996633".split(","),q%3D0.001,e%3D"",d%3Ddocument.body%3Bd.style.overflow%3D"visible"%3Bd.style.WebkitTransformStyle%3D"preserve-3d"%3Bd.style.WebkitPerspective%3Dp%3Bvar r%3D(window.innerWidth/2).toFixed(2),s%3D(window.innerHeight/2).toFixed(2)%3Bd.style.WebkitPerspectiveOrigin%3Dd.style.WebkitTransformOrigin%3Dr%2B"px "%2Bs%2B"px"%3Bo(d,0,0,0)%3Bvar f%3Ddocument.createElement("DIV")%3Bf.style.display%3D"none"%3Bf.style.position%3D"absolute"%3Bf.style.top%3D0%3Bf.innerHTML%3De%3Bd.appendChild(f)%3Bvar j%3D"NO_FACES"%3Bdocument.addEventListener("mousemove",function(b)%7Bif("DISABLED"!%3D%3Dj)%7Bvar c%3Db.screenX/screen.width,b%3D(360*(1-b.screenY/screen.height)-180).toFixed(2),c%3D(360*c-180).toFixed(2)%3Bd.style.WebkitTransform%3D"rotateX("%2Bb%2B"deg) rotateY("%2Bc%2B"deg)"%7D%7D,!0)%3Bdocument.addEventListener("mouseup",function()%7Bswitch(j)%7Bcase "NO_FACES":j%3D"FACES"%3Bf.style.display%3D""%3Bbreak%3Bcase "FACES":j%3D"NO_FACES",f.style.display%3D"none"%7D%7D,!0)%7D(25,5E3)%3B
Run Code Online (Sandbox Code Playgroud)

3D 视图说明

添加后单击任何网站上的书签。您可以单击以显示轮廓并像在 Firefox 中一样拖动以查看。

  • 我很快创建了 [一个小脚本](https://gist.github.com/corentinbettiol/85a8938175f89a15ac353b2c8b492e19),它看起来更像 Firefox 倾斜功能。 (2认同)