How to move a centered element consistently with absolute positioning on touchmove event?

I can't figure out how to keep in memory changed coordinates of the element every time I swipe.
This is difficult to do it cause the element is absolutely positioned and centered. Is there any way to get the current coordinates of the el?

Here is an ex here in Codepen

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const swipeDiv = document.querySelector(".swipe");
// console.log(swipeDiv.getBoundingClientRect().x);

swipeDiv.addEventListener("touchstart", handleTouchStart);
swipeDiv.addEventListener("touchmove", handleTouchMove);

let x1 = null;
let y1 = null;
let x2 = null;
let y2 = null;

function handleTouchStart(event) {
  const firstTouch = event.touches[0];
  if (x1 === null || y1 === null) {
    x1 = firstTouch.clientX;
    y1 = firstTouch.clientY;
  }
}

function handleTouchMove(event) {
  event.preventDefault();
  if (x1 === null || y1 === null) return false;
  window.scrollTo(window.pageXOffset, window.pageYOffset);
  x2 = event.touches[0].clientX;
  y2 = event.touches[0].clientY;
  let xDiff = x2 - x1;
  let yDiff = y2 - y1;

  this.style.transform = `translate(${-this.clientWidth / 2 + xDiff}px, ${
    -this.clientHeight / 2 + yDiff
  }px) rotate(-20deg)`;

  x1 = `${-this.clientWidth/2 + xDiff}`;
  y1 = `${-this.clientHeight/2 + yDiff}`;
}

<!-- language: lang-css -->

body {
  width: 100vw;
  height: 200vh;
  margin: 0;
  pading: 0;
  display: flex;
  justify-content: center;
  font-size: 1.2rem;
  background: pink;
}

.wrapper {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 150px;
  margin-top: 200px;
  background: #ccc;
}

.swipe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 300px;
  background: rgba(255, 0, 0, .5);
}

<!-- language: lang-html -->

<div class="wrapper">
  <div class="swipe">Testing touchmove</div>
</div>

<!-- end snippet -->

I tried but I failed.
Thanks a lot.

One way to do it is to subtract xDiff from x1 and yDiff from y1 in handleTouchStart. Just make sure to initialize these to zero globally first so we can use them. This is how it should look:

function handleTouchStart(event) {
  const firstTouch = event.touches[0];
  x1 = firstTouch.clientX - xDiff;
  y1 = firstTouch.clientY - yDiff;
}

Example: https://codepen.io/Dodekus/pen/xxJoWoQ