Как реализовать parallax effect со свойством css transform matrix?

Question

Виктория @Zorkina_vica

Как реализовать parallax effect со свойством css transform matrix?

Поскажите пожалуста может кто сталкивался, как реализовать parallax effect со свойством css transform matrix?
Вот что есть:

<div class="wrap">
  <div class="background"></div>
  <div class="content">
    <h2>3D Parallax</h2>
    <h3>Mouse Follow Animation</h3>
  </div>
</div>

body {
  position: relative;
  overflow: hidden;
  -webkit-perspective: 4000px;
  perspective: 4000px;
  background: none;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-align: center;
}

h2,
h3 {
  margin: 0;
  color: rgba(255, 255, 255, 1.00);
  text-shadow: 0px 20px 10px rgba(0, 0, 0, 0.75);
}

h2 {
  font-size: 50px;
  line-height: 50px;
}

h3 {
  font-weight: 300;
}

.wrap {
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  transition: transform 100ms linear;
  box-sizing: border-box;
  padding: 300px 30px 300px 30px;
}

.background {
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: -100px;
  left: -100px;
  bottom: -100px;
  right: -100px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/122149/wood-min.jpg);
  background-size: cover;
  -webkit-transform: translateZ(150px);
  -ms-transform: translateZ(150px);
  transform: translateZ(150px);
}

.content {
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(300px);
  -ms-transform: translateZ(300px);
  transform: translateZ(300px);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  max-width: 350px;
}

$(function() {
  var isMobile = window.matchMedia("only screen and (max-width: 768px)");
  var moveForce = 30; // max popup movement in pixels
  var rotateForce = 5; // max popup rotation in deg
  $(".wrap").mousemove(function(e) {
    var docX = $(this).outerWidth();
    var docY = $(this).outerHeight();

    var moveX = (e.pageX - docX / 2) / (docX / 2) * -moveForce;
    var moveY = (e.pageY - docY / 2) / (docY / 2) * -moveForce;

    var rotateY = (e.pageX / docX * rotateForce * 2) - rotateForce;
    var rotateX = -((e.pageY / docY * rotateForce * 2) - rotateForce);

    $('.wrap').css({
      '-moz-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      '-webkit-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      '-ms-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      '-o-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      'transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
    });
  });
  if (isMobile.matches) {
    function onDeviceMotion(event) {
      rotateForce = 10; // max popup rotation in deg
      var accel = event.accelerationIncludingGravity;

      var docX = $(this).outerWidth();
      var docY = $(this).outerHeight();

      var accelX = ((accel.x + 10) / 20) * docX;
      var accelY = ((accel.y + 10) / 20) * docY;

      var moveX = (accelX - docX) / (docX) * -moveForce;
      var moveY = (accelY - docY) / (docY) * -moveForce;

      var rotateY = -((accelX / docX * rotateForce * 2) - rotateForce);
      var rotateX = -((accelY / docY * rotateForce * 2) - rotateForce);

      $('.').css({
        '-moz-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        '-webkit-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        '-ms-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        '-o-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        'transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      });
    };
    window.addEventListener("devicemotion", onDeviceMotion, false);
  }
});

а необходимо добиться эффекта только для надписи с css transform matrix.
Пример: kamleshyadav.com/html/transport/transport/index.html