Stereoscopic image

by Arthur Lutkevichus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://www.even.lv" target="_blank">
  <span class="wrapper">
    <span class="img" id="img1" />
  </span>
</a>
<br />
<a href="http://www.even.lv" target="_blank">
  <span class="wrapper">
    <span class="img" id="img2" />
  </span>
</a>

CSS

a {
  display: inline-block;
  left: calc(50% - 125px);
  top: calc(50% - 125px);
  position: relative;
}


.wrapper {
  background: transparent;
  width: inherit;
  height: inherit;
  display: inline-block;
  float: left;
}

.img {
  width: 250px;
  height: 250px;
  margin: 1rem;
  float: left;
  transition: all .5s ease-out;
  background-size: cover;
  background-position: center center;
  box-shadow: 0 0 1rem rgba(0,0,0,.5);
}

#img1 {
  background-image: url("https://www.even.lv/portfolio/vladislava/preview.jpg");
}

#img2 {
  background-image: url("https://www.even.lv/portfolio/e-suppliers/preview.jpg");
}

JavaScript

$(function() {
  var lastFrameAnimation = null;

  $(".wrapper").on("mouseenter mousemove", function(e) {
  	var that = this;
    lastUpdateMoveAnimation = window.requestAnimationFrame(function() {
      var $img = $(that).find(".img");
      var offset = $(that).offset();
      var width = $img.width();
      var height = $img.height();
      var x = (e.pageX > offset.left + width / 2) ? 'right' : 'left';
      var y = (e.pageY > offset.top + height / 2) ? 'bottom' : 'top';

      var xHardness = (e.pageX - (offset.left + width / 2)) / 35;
      var yHardness = (e.pageY - (offset.top + height / 2)) / -35;

      $(that).css("perspective", $img.width());
      $img.css({
        transform: "rotateX(" + yHardness + "deg) rotateY(" + xHardness + "deg)"
      });

      lastFrameAnimation = null;
    });
  }).on("mouseleave", function() {
  	var that = this;
    lastUpdateMoveAnimation = window.requestAnimationFrame(function() {
      $(that).find(".img").css({
        transform: "rotateX(0deg) rotateY(0deg)"
      });
      lastFrameAnimation = null;
    });
  });
});