81

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?

  • 7
    Can you please reconsider to change your accepted answer? Firefox 47 changed this and that 3D functionality completely removed now – rubo77 Jul 4 '16 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 at 2:58
30

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 | |
  • 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 '16 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 '16 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 '16 at 8:46
  • it seems that Tilt 3D does not support Firefox Quantum version - any suggestions to alternative? – serup Jan 12 '18 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 '18 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 | |
  • 3
    It was not enabled by default in the version that I used when replying to the question. – Jason Aller Aug 13 '14 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 '14 at 1:53
  • 3
    Why did they bury it like this? Frustrating user experience. – inorganik Jun 16 '15 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 '16 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 '16 at 9:09
8

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 | |
  • 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 '16 at 9:14
6

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 | |
  • It's ok, but it's just not the same – goamn Oct 30 '19 at 4:39
  • 1
    I quickly created a tiny script that looks more like firefox tilt feature. – sodimel Aug 11 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 | |
  • thx for the links, saved me some lifetime. – mondjunge Feb 2 '18 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 | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.