Q: CSS | Transform translate (X, Y) effect on mousemove Имеется эффект который при наведении анимирует круг таким образом, чтобы менялось значение rotate по X и Y , но как добиться эффекта чтобы работало под translate.


var box = $(".scene");
box.on('mousemove', function (e) {
    var x = e.clientX - $(this).offset().left + $(window).scrollLeft();
    var y = e.clientY - $(this).offset().top + $(window).scrollTop();

    var rY = map(x, 0, $(this).width(), -30, 30);
    var rX = map(y, 0, $(this).height(), -30, 30);

    $('#x').html(x);
    $('#y').html(y);

    $(this).children(".box").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
});

box.on('mouseenter', function () {
    $(this).children(".box").addClass('transition-fast');
});

box.on('mouseleave', function () {
    $(this).children(".box").removeClass('transition-fast');

    $(this).children(".box").css("transform", "rotateY(" + 0 + "deg)" + " " + "rotateX(" + 0 + "deg)");
});

function map(x, in_min, in_max, out_min, out_max)
{
    return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: monospace;
  font-size: 14px;
}

.stats{
  margin-left: 50px;
  font-size: 20px;
  width: 200px;
}

.scene {
  width: 300px;
  height: 300px;
  perspective: 600px;
  cursor: pointer;
  border: 5px solid #000;
  padding: 50px;
  border-radius: 50%;
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform 0.5s ease;
  background: #000;
  border-radius: 50%;
}
.box.transition-fast {
  transition: transform 0.05s linear;
}

.side {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side h2 {
  transform: translateZ(30px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
  <div class="box">
    <div class="side front-side">
      <h2>Something text</h2>
    </div>
  </div>
</div>
<div class="stats">
  <p>
    X: 
    <span id="x"></span>
  </p>
  <p>
    Y: 
    <span id="y"></span>
  </p>
</div>


Собственно вот анимация (не знаю как правильно назвать её), но необходимо чтобы не кружился, а перемещался в нужном направлении но не переходил за границы.
Вот необходимый результат:


A: 

const $eventContainer = $("body");
const $box = $('.box');
const $scene = $('.scene');
// Так как есть паддинг, берем именно значение offsetWidth
const sceneRadius = $scene.get(0).offsetWidth / 2;
const boxRadius = $box.width() / 2; // тут паддинга нет
// Считаем максимально возможно смещение
// Так как круг не должен выходить за сцену
// Смещение должно быть не больше чем радиус сцены минус радиус круга
const maxTranslate = sceneRadius - boxRadius;

$eventContainer.on('mousemove', e => {
  const center = {
    x: $scene.offset().left + $scene.get(0).offsetWidth / 2,
    y: $scene.offset().top + $scene.get(0).offsetHeight / 2
  };
  const mouseCoords = {
    x: e.pageX - center.x,
    y: e.pageY - center.y,
  };
  
  const translateDistance = Math.sqrt(
      mouseCoords.x * mouseCoords.x + mouseCoords.y * mouseCoords.y)
  
  let translate;
  if (translateDistance <= maxTranslate) {
    translate = `translate(${mouseCoords.x}px, ${mouseCoords.y}px)`;
  } else {
    // Нормализуем вектор смещения
    const normalizeCoords = {
      x: mouseCoords.x / translateDistance,
      y: mouseCoords.y / translateDistance,
    };
    
    const finalCoords = {
      x: normalizeCoords.x * maxTranslate,
      y: normalizeCoords.y * maxTranslate,
    };
    
    translate = `translate(${finalCoords.x}px, ${finalCoords.y}px)`;
  }

  $box.css('transform', translate);
});
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: monospace;
  font-size: 14px;
}

.scene {
  width: 300px;
  height: 300px;
  cursor: pointer;
  border: 5px solid #000;
  padding: 50px;
  border-radius: 50%;
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: center;
  background: #000;
  border-radius: 50%;
}

.side {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side h2 {
  transform: translateZ(30px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
  <div class="box">
    <div class="side front-side">
      <h2>Something text</h2>
    </div>
  </div>
</div>


