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

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

i am following this codePen

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 ); = 'absolute'; = '0px'; = '10';

    //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
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)

This is what i want to get
Iwant to get

can anyone help, Thanks