86

I can't seem to make out this little feature that was once there in Firefox.

The 3D button that was there in an earlier version of the dev tools is gone and I can't seem to find any trace of this feature anywhere. If it's still there, how do I enable it?

Improve this question
2
  • 7
    Can you please reconsider to change your accepted answer? Firefox 47 changed this and that 3D functionality completely removed now
    – rubo77
    Jul 4, 2016 at 9:16
  • 2020: ftp.mozilla.org/pub/firefox/releases/46.0.1/mac/en-US This version still works on a mac just turn in on in the inspector settings and make sure not turn off auto-updates. If you need another FF version install latest "Developer Edition" so you can run 2 versions at the same time.
    – Khalil Gharbaoui
    Nov 15, 2020 at 2:58

8 Answers 8

Reset to default
34

From Firefox 47 onwards, built-in 3D view is no longer available.

There is an add-on that offers the same functionality: Tilt 3D.

Note: just like the built-in version, the add-on does not work in multiprocess Firefox.

Tilt 3D IS Not compatible with Firefox Quantum.

Improve this answer
8
  • Are you sure, it doesn't work in pultiprocess e10s? see how-to-check-if-multiprocess-e10s-option-is-enabled-in-your-firefox
    – rubo77
    Jul 5, 2016 at 6:41
  • @rubo77 Yes , I checked it in Firefox Developer Edition. Tild 3D doesn't work in Multiprocess e10s.
    – Rahul K Jha
    Jul 5, 2016 at 8:39
  • So it seems, like multiprocess must be disabled in my firefox 47 then, cause Tild 3D works. (I didn't disable it manualy)
    – rubo77
    Jul 5, 2016 at 8:46
  • it seems that Tilt 3D does not support Firefox Quantum version - any suggestions to alternative?
    – serup
    Jan 12, 2018 at 7:49
  • 2
    @serup , You are right but I couldn't find any other alternative. Let us know if you find any.
    – Rahul K Jha
    Jan 13, 2018 at 9:52
70

Up until Firefox version 47: If you right click and select "Inspect Element" and then click the gear icon at the left hand side of the toolbox menu you should see "Available Toolbox Buttons" under which appears "3D View".

enter image description here

Clicking this will add a new icon to the toolbox menu that when clicked will show the 3D Dom view.

enter image description here

Improve this answer
8
  • 3
    It was not enabled by default in the version that I used when replying to the question.
    – Jason Aller
    Aug 13, 2014 at 23:54
  • 26
    Looks like it has been completely removed from the firefox developer edition. What a shame as it really set it apart from Chrome.
    – Ray Suelzer
    Nov 17, 2014 at 1:53
  • 3
    Why did they bury it like this? Frustrating user experience.
    – inorganik
    Jun 16, 2015 at 22:33
  • 12
    "From Firefox 47 onwards, 3D view is no longer available. There is an add-on that offers the same functionality: Tilt 3D. However, note that just like the built-in version, the add-on does not work in multiprocess Firefox." Source: developer.mozilla.org/en-US/docs/Tools/3D_View
    – nachtigall
    May 10, 2016 at 9:52
  • 4
    You are right, this answer is outdated since FF 47, @ThorOdinson 's Answer below should be the accepted. Tilt 3D works quite well
    – rubo77
    Jul 4, 2016 at 9:09
9

Goto: Preferences->General Uncheck "Enable multi-process Firefox Developer Edition"

Restart Firefox

Goto: Developer tool bar [Tool Box Options], "3D View" check box should now show under "Available Toolbox Buttons", make sure this is checked and you are good.

Improve this answer
1
  • I cannot find that option in my german Firefox 47.0, maybe it is called something like electrolysis or e10s in about:config. Anyway: I think it is not a good Idea to disable the new feature of multiprocessor support
    – rubo77
    Jul 4, 2016 at 9:14
7

I know this question is in regards to FireFox, but you can get this feature in Chrome as well (Firefox won't let you insert JS as a bookmark):

3D View Chrome

Add this javascript code as a bookmark url:

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

Instructions for 3D view

Once added click the bookmark on any website. You can click to show outlines and drag to view like in Firefox.

Improve this answer
2
  • It's ok, but it's just not the same
    – goamn
    Oct 30, 2019 at 4:39
  • 2
    I quickly created a tiny script that looks more like firefox tilt feature.
    – sodimel
    Aug 11, 2020 at 18:18
4

Update: It's been removed from FF 47 onwards, but is available in an add-on.

It seems FF updates might disable this. FF 38 has changed the settings icon location.

Firefox 38 - cube and cog on the right:

Firefox 38

Improve this answer
2

Firefox 46.0 still can be downloaded here : https://ftp.mozilla.org/pub/firefox/releases/46.0/

And Tilt 3D module here (from Firefox 46.0) : https://addons.mozilla.org/en-US/firefox/addon/tilt/

Render view seems better with Tilt 3D than with native 3D View from Web Developer Tools :

Screenshot comparison between Tilt 3D and 3D View

Improve this answer
1
  • thx for the links, saved me some lifetime.
    – mondjunge
    Feb 2, 2018 at 9:13
2

Have a look at Microsofts Edge Browser.

I have version Version 79.0.283.0 (Official build) canary (64-bit). Put edge://flags/ in the address bar and enable Developer Tools experiments. Open the developer tools and press Control+Shift+P and search Experiments and find Enable DOM 3D view.

Now you can use Ctrl+Shift+P > DOM 3D View.

It's not a Firefox solution but it worked for me.

I found out about it here.

Improve this answer
1

It's gone after version 46. A solution to this is to Google "Firefox 46 download" Install that version and rename it (on Mac) to something like firefox-45 to keep the updated version as well. Launch version 45 and turn automatic updates off. You can now enable the 3D view and see the page in 3D and tilt it.

Hope that works for you.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .