title: Transform Translate 3d with JQuery
body: <p>I have a small problem
  I try to animate div on scroll
  but it looks like I made a mistake somewhere
  At the very beginning, when loading the page, positioning does not take place in the center of the window, as I indicated, but with an offset to the left
  This is my code
  If someone knows or sees what the problem will be extremely grateful</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).scroll(function() {
      var scroll = $(window).scrollTop();
        $(".image-1").css({
            transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
            //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
            //"-webkit-filter": "blur(" + (scroll/200) + "px)",
            //filter: "blur(" + (scroll/200) + "px)"
        });
    });
    $(document).ready(function () {
        var img = $('.image-1');
  
        $(window).scroll(function(){
            if ($(window).scrollTop() &gt; 400) {
                img.fadeOut();
            } else {
                img.fadeIn();
            }
  
        });
      
    });
  
  
  
    $(window).scroll(function() {
      var scroll = $(window).scrollTop();
        $(".image-2").css({
            transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
            //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
            //"-webkit-filter": "blur(" + (scroll/200) + "px)",
            //filter: "blur(" + (scroll/200) + "px)"
        });
    });
    $(document).ready(function () {
      var img = $('.image-2');
  
      $(window).scroll(function(){
          if ($(window).scrollTop() &gt; 1200) {
              img.fadeOut();
          } else {
              img.fadeIn();
          }
  
      });
    
  });
  
  
  
  $(window).scroll(function() {
      var scroll = $(window).scrollTop();
        $(".image-3").css({
            transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
            //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
            //"-webkit-filter": "blur(" + (scroll/200) + "px)",
            //filter: "blur(" + (scroll/200) + "px)"
        });
    });
    $(document).ready(function () {
      var img = $('.image-3');
  
      $(window).scroll(function(){
          if ($(window).scrollTop() &gt; 800) {
              img.fadeOut();
          } else {
              img.fadeIn();
          }
  
      });
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      height: 6000px;
      width: 80%;
  }
  
  .image-4, .image-5, .image-6, .image-7{
      width: 450px;
      height: 300px;
  }
  .image-2{
      position: fixed;
      top: 30%;
      left: 60%;
      width: 20%;
      height: 25%;
  }
  .image-3{
      position: fixed;
      top: 30%;
      left: 40%;
      width: 20%;
      height: 25%;
  }
  .container{
      display: flex;
     
  }
  .image-1{
      position: fixed;
      top: 30%;
      left: 50%;
      width: 30%;
      height: 35%;
      transform: translate(-50% -50%);
      -webkit-transform: translate(-50% -50%);
      -moz-transform: translate(-50% -50%);
      -ms-transform: translate(-50% -50%);
      -o-transform: translate(-50% -50%);
  }
  .first-block{
      position: relative;
      z-index: 20;
  }
  .second-block{
      position: relative;
      z-index: 15;
  }
  .image-4{
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="first-block"&gt;
              &lt;img class="image-1" src="https://image.freepik.com/free-photo/pro-photography-equipment_1426-1771.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="second-block"&gt;
              &lt;img class="image-2" src="https://image.freepik.com/free-photo/smiling-young-woman-holding-flower-bouquet-hand_23-2148066878.jpg" alt=""&gt;
              &lt;img class="image-3" src="https://image.freepik.com/free-photo/portrait-cheerful-young-woman_23-2148066871.jpg" alt=""&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>