I made some tests with CSS3DObject and it works as far as I wanted it to.
As starting point I used the examples of @trusktr.
I have done a simplification. See Do we need the intermediate object. (.css3dObject.) There is also a question.
But I can’t get the options into the select element in a way that they are displayed correctly.
I have not found an example for this problem.
See
threejs.hofk.de section -Test- CPU-Simulation or directly MixedHtmlCssWebGl
It is working for me in Chromium 86.0.4240.111 (Official Build) for Linux Mint (64-bit):
There are JavaScript plugins which allow you to style dropdowns by hiding the default dropdown and creating a new one using DOM elements.
For example: https://webcodeflow.com/dropdown-bvselect/
Maybe that will fix the issue since the browsers native dropdown isn’t used anymore?
I use Windows 10. The video is from the latest Firefox 82.0.2 (64-bit)
With Chrome version 86.0.4240.183 (official build) (64-bit) the behaviour is like in your video. There the options are in the right position, but the perspective is wrong. They are always plane to the 2D screen plane.
But it should work with CSS3D -or? 
I think the browsers native behavior is in the way here, you cannot alter the way a select works.
What you can do is replace the select with one generated with DOM elements.
I created a fiddle to demonstrate what I mean:
You probably hit:
Should be fixed with Chrome 87.
I probably always stumble over these things. I just thought I was too stupid to do it properly. 
It’s nice that it will soon be available in chrome, but there are other browsers. It’s absolutely frustrating that browsers have been behaving differently since their inception and after so many years have no common standard. This causes frustration and costs for programmers and users.
The fact that you needed jQueriy for many years to be able to work meaningfully is bad.
But jQuery is no longer up to date. But the browsers are still not on a standard!
I recently read for example
Javascript optimieren | mediaevent.de
Excerpt from the text, translated with www.DeepL.com/Translator (free version):
"jQuery is a brake
With the departure of the old browsers, jQuery no longer needs to be used for every operation, even if jQuery is already loaded in the project anyway. Javascript has achieved a high level of consistency in modern browsers when manipulating the DOM. Native Javascript (Vanilla Javascript) offers selectors as comfortable as jQuery, even if querySelector and querySelectorAll means more typing. In any case, native Javascript is significantly faster for DOM operations."
and
Well, the above issue is a bug and something like that can always happen. It’s not that Chrome follows different web standards than other browsers.
Bugs happen to me more often than I would like.
That’s not what I mean, not even a special browser regarding standards. So I don’t really argue with my wife, she mostly uses Chrome, I more often use Firefox and Safari I can’t test.
And in Firefox it does not work as expected at the moment. Possibly a bug as well?
But even if jQuery is not really necessary anymore and the browsers behave much more consistent than before, it is still not perfect.
Such tables would otherwise not be needed at all. In former times they were very “colourful” because of the different support of things.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Browser compatibility
A simple example - two different working methods - no standard?
In my triangulation of implicit surfaces Addon for triangulation of implicit surfaces/ forms with holes I have the Example
https://hofk.de/main/threejs/sandboxthreei/triangulationImplicitSurface.html
There it is important that you can follow the development of the triangle with the slider. Interesting for the observer, but indispensable for me during the development for troubleshooting.
If you place the slider at an important place, e.g. where the front joins, and make a small change in the program to see what the result is, you have to update the page.
Two browsers react differently.
One goes to the middle position, the other remembers the position and immediately shows me the result of my change.
What is better there is of course always dependent on the specific case. In the same way the design is different, here it doesn’t matter, in other cases it’s not. Then you program a slider yourself again.
The native options are not rendered as DOM in the browsers. They’re like OS-specific windows that the browser places on top of the page.
The issue @Mugen87 linked to is a different one, which applies to CSS3D content, but the browser’s native select options are not rendered with CSS3D (not rendered in the DOM).
As @Bossie showed in his last example, the only way to do it is to make your own dropdown instead of relying on the native one.
@trusktr
Thank you for explaining the background to this problem. I have never dealt with HTML/CSS/DOM in great depth.
But this shows that there are still inconsistencies. After so many years of browsers (with an elementary thing like select with options) actually pretty amazing.
The problem is solved for me because I will not use CSS3DObject at all in the current project. After the tests the design is too flat for me. For the CPU simulation I design a custom 3D GUI.
A first draft of a select-box.
The wireframe part to see if the mnemonics are arranged correctly on the texture.
The list unrolls from the box, which is currently still open at the sides, with 7 closed and one open shell. It then has a flat cosine shape. The selection is made using raycast.
Cool! Yep, making a pure-WebGL UI is one way to go. Would be neat to see the live example!
I’m still in the middle of experiments on what makes sense and what works the way I think.
If I have presentable results, I post them on my page https://threejs.hofk.de in the category -Test- CPU-Simulation right after my addons. There, where also the select-option is an example.
Cool. Also check out
It says “VR” but you can use it in any Three.js scene.
I have seen it, but it is much too complex for my application. So it is more efficient to create a GUI specifically for the project.
I am still experimenting.
How do I prevent FF from caching control element value on soft reload?
autocomplete=off
I know that the different browsers have different settings. But this still illustrates the problem of inconsistency. To expect the normal user to have to change any settings to have a pleasant experience in any browser is the very problem. And these things change from time to time.
We will not be able to solve this problem. 
