Убрать скачки при наведении на карточку

'use strict';

(function () {

  var blogCards = document.querySelectorAll('.blog-card-box');

  function rotate(evt) {
    var blogItem = this.querySelector('.blog-card');
    var setHeight = blogItem.offsetHeight / 2;
    var setWidth = blogItem.offsetWidth / 2;

    blogItem.style.transform = 'rotateX(' + -(evt.offsetY - setHeight) / 10 + 'deg)' +
      'rotateY(' + (evt.offsetX - setWidth) / 10 + 'deg';
  }

  function rotateNone() {
    var cardItem = this.querySelector('.blog-card');

    cardItem.style.transform = 'rotateX(0deg)' + 'rotateY(0deg)';
  }

  for (var i = 0; i < blogCards.length; i++) {
    var item = blogCards[i];
    item.addEventListener('mousemove', rotate);
    item.addEventListener('mouseout', rotateNone);
  }

})();

body {
  background-color: #ccc;
}

.blog-list {
  margin: 20px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 300px);
  grid-gap: 30px;
}

.blog-card {
  height: 100%;
  min-height: 260px;
  background-color: #fff;
  border: solid 4px #fff;
  border-radius: 10px;
  box-shadow: -10px -10px 20px rgba(255, 255, 255, 0.5),
    10px 10px 20px rgba(68, 69, 70, 0.1),
    inset 4px 4px 15px rgba(255, 255, 255, 0.4);
}

.blog-image {
  position: relative;

  img {
    width: 100%;
    height: auto;
    display: block;
  }
}

.blog-text {
  p {
    margin: 0;
    padding: 15px 25px;
    font-size: 24px;
    line-height: 29px;
  }
}

<ul class="blog-list">
  <li>
    <div class="blog-card-box">
      <div class="blog-card">
        <a href="#">
          <div class="blog-image">
            <img src="https://media.lpgenerator.ru/uploads/2019/07/11/1_thumb600x460.jpg" width="290" height="150" alt="">
          </div>
          <div class="blog-text">
            <p>Lorum</p>
          </div>
        </a>
      </div>
    </div>
  </li>
  <li>
    <div class="blog-card-box">
      <div class="blog-card">
        <a href="#">
          <div class="blog-image">
            <img src="https://media.lpgenerator.ru/uploads/2019/07/11/1_thumb600x460.jpg" width="290" height="150" alt="">
          </div>
          <div class="blog-text">
            <p>Lorum</p>
          </div>
        </a>
      </div>
    </div>
  </li>
</ul>