How to remove transform style in draggable element?

Using the example from cdk drag and drop, I want to add a preview of the dragged element with left and top positions without the transform style

HTML

<div class="example-boundary">
  <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
    I can only be dragged within the dotted container
  </div>
</div>

<button> Preview the dragged element </buttona>

TS

import {Component} from '@angular/core';
import {CdkDrag} from '@angular/cdk/drag-drop';

/**
 * @title Drag&Drop boundary
 */
@Component({
  selector: 'cdk-drag-drop-boundary-example',
  templateUrl: 'cdk-drag-drop-boundary-example.html',
  styleUrls: ['cdk-drag-drop-boundary-example.css'],
  standalone: true,
  imports: [CdkDrag],
})
export class CdkDragDropBoundaryExample {}

Current state

When you drag the element you have this div in DOM

<div _ngcontent-ng-c2320506461="" class="example-boundary">
  <div _ngcontent-ng-c2320506461="" cdkdragboundary=".example-boundary" cdkdrag="" class="cdk-drag example-box" style="transform: translate3d(202px, -2px, 0px);"> 
I can only be dragged within the dotted container
 </div>
</div>

Expected result.

When you drag the element and click the preview button it should open the preview element which looks like this

<div class="example-boundary">
  <div class="example-box" style="left: 96.13%; top: 9.92%; display: block;">
   Now I can't be dragged, sorry
  </div>
</div>

Meaning the transform style should be replaced with left and top position.

from How to remove transform style in draggable element?