CSS2DObject rotation

Questions
1

Hi!
Is it possible to set rotation for CSS2DObject?
For example in these fiddle?


I tryed so
moonDiv.style.transform = ‘rotate(30deg)’;
and so
moonLabel.rotation.x = Math.PI/6

image

As I can see in source code there always rewrites style trasform

image
image1701×530 26.1 KB

I made correction in source code so it should look like this

image
image1642×519 49.4 KB

2

Yes, CSS renderer needs transform on its own, but only on the root object - so it should be enough to place a div inside the root and then transform it around. :thinking:

const wrapper = document.createElement('div'); // Just create and ignore this element entirely, later add the actual label element as a child of it
const moonDiv = document.createElement('div');
moonDiv.className = 'label';
moonDiv.textContent = 'Moon';
moonDiv.style.marginTop = '-1em';
moonDiv.style.transform = 'rotate(30deg)';

wrapper.addChild(moonDiv); // Add div to the wrapper that inherits transform from CSS2DObject

const moonLabel = new CSS2DObject(wrapper);
moonLabel.position.set(...);
moonLabel.rotation.set(...);

moon.add(moonLabel);
2 Likes
3

Great! It works! Thanks a lot!

4

Great! I am very grateful