Take Dramatic 3D Screenshots of Websites with Firefox

Warning: Attempt to read property "post_excerpt" on null in /home/tedcurra/public_html/wp-content/themes/splits/single.php on line 15

Mozilla 3D Developer Preview

If you do a lot of presentations or tutorials about technology, you probably have to take screenshots of websites to illustrate your ideas. I really like to add a “wow” factor to my presentations whenever I can do it gracefully, and I’ve been using Firefox’s 3D Developer Preview to add visual interest to website screenshots.


Just load up the site you want to talk about in Firefox, fire up the 3D Developer Preview of it, and take a screenshot. Here’s how:

How do you do it?

  1. Familiarize yourself with Firefox 3d Developer Preview.
  2. Navigate to the website you want to screenshot
  3. Pull down Firefox’s Developer Tools menu and enter 3D Prevew
  4. Position your website in the most awesome way possible
  5. Shoot and edit your screenshot with your favorite screen capture software like Jing, Skitch, or good ol’ Grab in OSX
  6. Drop that screenshot into your presentation, document, or whatever creative piece you’re working on!

It’s really that simple! I’d love to see what you do with this tool– please leave links to your 3D presentations in the comments!


Liked this post? Follow this blog to get more. 

Written by

Ted Curran is a Learning Experience Designer/Developer for Autodesk. He is committed to empowering educators and learners to create transformational change through effective pedagogy and technology integration. You can follow Ted on Mastodon, LinkedIn or learn more at my 'About" page. These thoughts are my own.

You may also like...


This site uses Akismet to reduce spam. Learn how your comment data is processed.