80
9
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?
MildlyInteresting
Posted 2014-06-29T19:17:51.677
Reputation: 903
30
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.
Rahul K Jha
Posted 2014-06-29T19:17:51.677
Reputation: 546
Are you sure, it doesn't work in pultiprocess e10s? see how-to-check-if-multiprocess-e10s-option-is-enabled-in-your-firefox
– rubo77 – 2016-07-05T06:41:28.123@rubo77 Yes , I checked it in Firefox Developer Edition. Tild 3D doesn't work in Multiprocess e10s. – Rahul K Jha – 2016-07-05T08:39:57.163
So it seems, like multiprocess must be disabled in my firefox 47 then, cause Tild 3D works. (I didn't disable it manualy) – rubo77 – 2016-07-05T08:46:27.530
it seems that Tilt 3D does not support Firefox Quantum version - any suggestions to alternative? – serup – 2018-01-12T07:49:00.650
2@serup , You are right but I couldn't find any other alternative. Let us know if you find any. – Rahul K Jha – 2018-01-13T09:52:18.417
This has started showing up in Edge builds now, of all places. – Nathan Osman – 2019-10-11T14:19:43.393
the addon link is not available anymore, is there another addon? – cyptus – 2019-10-31T15:59:52.000
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".
Clicking this will add a new icon to the toolbox menu that when clicked will show the 3D Dom view.
Jason Aller
Posted 2014-06-29T19:17:51.677
Reputation: 2 254
It seems like this should be enabled by default. Is it not? – Oran D. Lord – 2014-08-13T20:29:31.167
3It was not enabled by default in the version that I used when replying to the question. – Jason Aller – 2014-08-13T23:54:25.003
24Looks like it has been completely removed from the firefox developer edition. What a shame as it really set it apart from Chrome. – Ray Suelzer – 2014-11-17T01:53:36.973
2Why did they bury it like this? Frustrating user experience. – inorganik – 2015-06-16T22:33:34.633
It's not completely removed from FF; it's disabled while e10s (multiprocess) is enabled. Turn it off as per drewfg's answer below – dukevin – 2015-08-27T09:44:35.883
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: https://developer.mozilla.org/en-US/docs/Tools/3D_View
– nachtigall – 2016-05-10T09:52:02.7334
You are right, this answer is outdated since FF 47, @ThorOdinson 's Answer below should be the accepted. Tilt 3D works quite well
– rubo77 – 2016-07-04T09:09:34.4978
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.
drewfg
Posted 2014-06-29T19:17:51.677
Reputation: 89
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 – 2016-07-04T09:14:57.803
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:
Nick Westgate
Posted 2014-06-29T19:17:51.677
Reputation: 1 677
3
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):
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
Once added click the bookmark on any website. You can click to show outlines and drag to view like in Firefox.
user45288
Posted 2014-06-29T19:17:51.677
Reputation: 131
It's ok, but it's just not the same – goamn – 2019-10-30T04:39:58.590
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 :
Klemart3D
Posted 2014-06-29T19:17:51.677
Reputation: 21
thx for the links, saved me some lifetime. – mondjunge – 2018-02-02T09:13:53.657
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.
ǝlpoodooɟƃuooʞ
Posted 2014-06-29T19:17:51.677
Reputation: 21
0
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.
Adam Ema
Posted 2014-06-29T19:17:51.677
Reputation: 1
7Can you please reconsider to change your accepted answer? Firefox 47 changed this and that 3D functionality completely removed now – rubo77 – 2016-07-04T09:16:53.580