Instructions

Welcome to the 3D View (Layers) Tool demonstration! Follow the steps below to explore the capabilities of the 3D View tool in your browser's DevTools:

1. First, access DevTools in your browser:
   • Windows/Linux: Press F12 or Ctrl+Shift+I
   • Mac: Press Cmd+Option+I
   • Or right-click anywhere and select "Inspect"
2. In DevTools, locate and click the "More tools" menu (usually shown as three dots ⋮)
3. Select "3D View" from the dropdown menu
4. In the 3D View panel:
   • Use the mouse to rotate the 3D view
   • Check "Show layer borders" to see element boundaries
   • Adjust "Z-space" slider to modify depth perception
   • Click elements to highlight them in both views
5. Notice how different elements (boxes, layers, and iframes) are positioned in 3D space