visibility:hidden vs display:none vs opacity:0

They all render the element invisible, yet differ in whether it occupies space and consumes clicks

+--------------------+----------------+-----------------+
| Property           | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0         |        ✓       |        ✓        |
+--------------------+----------------+-----------------+
| visibility: hidden |        ✓       |        ✗        |
+--------------------+----------------+-----------------+
| display: none      |        ✗       |        ✗        |
+--------------------+----------------+-----------------+

✓: yes
✗: no

And when we say it consumes click, that means it also consumes other pointer events like ondblclick,onmousedown,onmousemove etc.

In essence "visibility: hidden" behaves like a combination of "opacity: 0" and "pointer-events: none".

The answer found here will answer your first question (most likely display:none as the space is collapsed completely).

To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.

Perfomamce will be an issue if display:none or visibility:hidden is used since they trigger paint and layout in most browsers which means your browser will redraw the viewport whenever those two changes so I will recommend opacity but still for that number of divs it will still be not perfomant as expected you can try webgl using a library called html-gl which render your divs in webgl check https://github.com/PixelsCommander/HTML-GL