Sync DOM element movement on Z axis to be the same with WebGL 3DObject movement

Questions
1

Hi All,
I am trying to make a zoom effect on a page, so as the camera moves in the -z direction in passed a 3dObject and next to is a DOM div. So I need to DOM div to be in the same z axis position as the 3d Object

(like the scroll effect in this site https://365ayearof.cartier.com/)

i am following this codePen https://codepen.io/trusktr/pen/RjzKJx

I know that this is a css3dRendere functionality but i cannot make it work.

this is the part that i create the CssRenderer and CSS3DObject

this.cssRenderer = new CSS3DRenderer();

    this.cssRenderer.setSize( this.sizes.width, this.sizes.height );
    this.cssRenderer.domElement.style.position = 'absolute';
    this.cssRenderer.domElement.style.top = '0px';
    this.cssRenderer.domElement.style.zIndex = '10';
    document.body.appendChild(this.cssRenderer.domElement);

    //find the size in wold space of the my 3d object
    const obj = this.designer.items['anthologio'].obj; // my 3d object
    const s1Size = this.getObjectsize(obj);
    
    // create a new 3d object       
    const element = this.domElement.s1; // gets a dom with an id='#s1'
    this.css3dObject = new CSS3DObject( element );
    obj.css3dObject = this.css3dObject;

    obj.add(this.css3dObject); // make my 3d Object parrent of the element in order to m
    this.css3dObject.position.set(-s1Size.x,0,0) // i move the Dom element to the left of my 3d object

my scc for the #s1 is
#s1{
width: 30vw;
height: 50vh;
background-color: transparent;
position: absolute;
}

This is what i get (The dom does not follow the object when I move the camera along the z axis)
what-iget

This is what i want to get
Iwant to get

can anyone help, Thanks