JSFiddle - React, Tailwind, and code Playground

by Yonas Hailu

HTML

<div class="small-header js-3dheader">
  <div class="small-header__wrapper">
    <div id="image-transform" class="small-header__background">
      <div class="small-header__background-image"></div>
    </div>
  </div>
</div>

CSS

.small-header {
  height: 573px;
  width: 100%;
  position: relative;
  margin-bottom: 0px;
  margin-top: 54px;
  -moz-perspective: 800px;
  -webkit-perspective: 800px;
  perspective: 800px;
}

.small-header__wrapper {
  height: 100%;
  width: 100%;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-perspective: 800px;
  -webkit-perspective: 800px;
  perspective: 800px;
  -moz-transform-origin: 50% 50% 0;
  -webkit-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
  transition: transform 0.25s ease;
}

.small-header__background {
  height: 100%;
  top: 0;
  left: 0px;
  right: 0px;
  position: absolute;
  z-index: 0;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.small-header__background-image {

  height: 100%;
  top: 0;
  left: 0px;
  right: 0px;
  position: absolute;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: url(http://www.vermont.eu/sites/all/themes/vermont/img/header-about-us4.jpg);
	  background-size: cover;
}


/* .small-header__wrapper{
	transform: matrix3d(0.996303, 0, -0.085912, 0, -0.00747423, 0.996208, -0.086677, 0, 0.0855863, 0.0869986, 0.992525, 0, 0, 0, 0, 1);
} */

JavaScript

$height = $(".js-3dheader").height();
$width = $(".js-3dheader").width();
$maxHeight = $height / 2;
$maxWidth = $width / 2;
$(".js-3dheader").mousemove(function(e) {
  $(".small-header__wrapper").css("transform", "matrix(1,0,0,1," + (-(e.pageX - $maxWidth)) / $maxWidth * 60 + "," + (-(e.pageY - $maxHeight)) / $maxHeight * 60 + ")");
});
$(".js-3dheader").mouseout(function(e) {
  $(".small-header__wrapper").css("transform", "matrix(1,0,0,1,0,0)");
});