Вращение блока при движении мышкой

const img = document.querySelector("img"); 
 
document.addEventListener("mousemove", function (e) { 
  move (e.clientX, e.clientY); 
}); 
 
function move (x, y) { 
  let wh = window.innerHeight / 2, 
  ww = window.innerWidth / 2; 
   
  document.body.style.setProperty('--mouseX', (x - ww) / 30 + "deg"); 
  document.body.style.setProperty('--mouseY', (y - wh) / 30 + "deg"); 
}

:root { 
  --mouseX: 0deg; 
  --mouseY: 0deg; 
} 
 
body { 
  display: flex; 
  min-height: 100vh; 
} 
 
img { 
  width: 50vmin; 
  height: 50vmin; 
  margin: auto; 
  transform: rotateX(calc(var(--mouseY))) rotateY(calc(var(--mouseX))); 
}

<img src="http://www.pngmart.com/files/3/Sports-Ball-PNG-Photos.png">

let $img = $('.card'); 
 
function move(x, y) { 
  // обертка с доп свойствами 
  $img.addClass('card-active'); 
 
  // центр карточки 
  let xser = $img.offset().left + $img.width() / 2; 
  let yser = $img.offset().top + $img.height() / 2; 
 
  // координаты мыши относительно центра карточки 
  let otnX = x - xser; 
  let otnY = y - yser; 
 
  // вычисляем % - на каком расстоянии мышь от середины до края, центр = 0% 
  let raznX = otnX / $img.width() * 100 * 2; 
  let raznY = otnY / $img.height() * 100 * 2; 
 
  // на сколько градусов нужно повернуть (100% = 6deg) 
  let trX = raznY / 100 * 6 * -1; 
  let trY = raznX / 100 * 6; 
 
  // окруление 
  trX = Math.round(trX * 1000) / 1000; 
  trY = Math.round(trY * 1000) / 1000; 
 
  // в css 
  $img.css('transform', 'rotateY(' + trY + 'deg) rotateX(' + trX + 'deg) rotateZ(0deg) scale(1.05)'); 
} 
 
function resetTransform() { 
  $img.removeClass('card-active'); 
  $img.css('transform', 'rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1)'); 
} 
 
$img.mousemove(function(e) { 
    move(e.pageX, e.pageY); 
  }) 
  .mouseout(function(e) { 
    resetTransform(); 
  });

.card-wrapper { 
  perspective: 1000px; 
  transform-style: preserve-3d; 
} 
 
.card { 
  background: linear-gradient(45deg, #1e5799 0%, #bab523 19%, #210611 37%, #e23424 66%, #28fcdc 84%, #764682 100%); 
  display: block; 
  position: relative; 
  width: 220px; 
  height: 320px; 
  margin: 50px auto; 
  transition: transform .4s cubic-bezier(.4, 0, .2, 1); 
} 
 
.card img { 
  width: 100%; 
  height: 100%; 
} 
 
.card img:before { 
  position: absolute; 
  content: ''; 
  width: 3px; 
  height: 3px; 
  border-radius: 50%; 
  background-color: #000; 
  left: 50%; 
  top: 50%; 
} 
 
.card-active { 
  transition: transform .4s cubic-bezier(0, 0, .2, 1), filter .15s cubic-bezier(0, 0, .2, 1); 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<div class="card-wrapper"> 
  <div class="card"> 
 
  </div> 
</div>