title: Perspective effect only working with unclosed img tags.. why? and how to fix?
body: <p>I'm trying to create the exact effect below (but on a pop up modal). I got it to work so far but the html is broken (img tags not closed). And if I fix the img tags the perspective effect goes away. Can someone explain why and show me how to fix it please? I have perspective:100px on the main wrapper as per this article <a href="https://css-tricks.com/almanac/properties/p/perspective/" rel="noreferrer">https://css-tricks.com/almanac/properties/p/perspective/</a>..  </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>var lFollowX = 0,
      lFollowY = 0,
      x = 0,
      y = 0,
      friction = 1 / 30;
  
  function moveBackground() {
    x += (lFollowX - x) * friction;
    y += (lFollowY - y) * friction;
    
    translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';
  
    $('.bg').css({
      '-webit-transform': translate,
      '-moz-transform': translate,
      'transform': translate
    });
  
    window.requestAnimationFrame(moveBackground);
  }
  
  $(window).on('mousemove click', function(e) {
  
    var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
    var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
    lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
    lFollowY = (10 * lMouseY) / 100;
  
  });
  
  moveBackground();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 100vh;
  }
  
  .wrap {
    background-color: #0F2044;
    -webkit-perspective: 100px;
            perspective: 100px;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .wrap .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrap"&gt;
    
    &lt;div class="bg"&gt;
          &lt;img class="front" src="https://shannels.com/fg.svg"
    &lt;/div&gt;
      &lt;div class="bg"&gt;
          &lt;img class="front" src="https://shannels.com/mg.svg"
    &lt;/div&gt;
        &lt;div class="bg"&gt;
          &lt;img class="front" src="https://shannels.com/bg.svg" 
    &lt;/div&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>