# CSS2DObject rotation

**URL:** <https://discourse.threejs.org/t/css2dobject-rotation/20714>\
**Category:** Questions\
**Created:** [November 13, 2020, 10:35pm UTC](https://discourse.threejs.org/t/css2dobject-rotation/20714 "2020-11-13T22:35:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dragon3DGraff](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dragon3dgraff/32/10140_2.png) [@Dragon3DGraff](https://discourse.threejs.org/u/Dragon3DGraff)\
**Post date:** [November 13, 2020, 10:35pm UTC](https://discourse.threejs.org/t/css2dobject-rotation/20714/1 "2020-11-13T22:35:51Z")

</div>

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

> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/Dragon3DGraff/dkgv6m25/5/)**

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

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/4666be3239860d6c066170c9d779d580c3d2882e.png)

As I can see in [source code](https://github.com/mrdoob/three.js/blob/45b0103e4dd9904b341d05ed991113f2f9edcc70/examples/jsm/renderers/CSS2DRenderer.js#L101) there always rewrites style trasform

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d83b7dbf5bf6f3a3e67d32c525c8c5839167d6bb.png)

I made correction in [source code](https://github.com/mrdoob/three.js/blob/45b0103e4dd9904b341d05ed991113f2f9edcc70/examples/jsm/renderers/CSS2DRenderer.js#L101) so it should look like this

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/b4ed03d35cb3547f1eee29d5eaefc8bf206d9b8b.png)

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [November 13, 2020, 11:28pm UTC](https://discourse.threejs.org/t/css2dobject-rotation/20714/2 "2020-11-13T23:28:50Z")

</div>

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. 🤔

```javascript
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);

```

---

<div class="post-metadata">

**Author:** ![Dragon3DGraff](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dragon3dgraff/32/10140_2.png) [@Dragon3DGraff](https://discourse.threejs.org/u/Dragon3DGraff)\
**Post date:** [November 13, 2020, 11:34pm UTC](https://discourse.threejs.org/t/css2dobject-rotation/20714/3 "2020-11-13T23:34:40Z")

</div>

Great! It works! Thanks a lot!

> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/Dragon3DGraff/dkgv6m25/10/)**

---

<div class="post-metadata">

**Author:** ![wild](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wild/32/44957_2.png) [@wild](https://discourse.threejs.org/u/wild)\
**Post date:** [February 25, 2024, 5:56pm UTC](https://discourse.threejs.org/t/css2dobject-rotation/20714/4 "2024-02-25T17:56:26Z")

</div>

Great! I am very grateful