透视效果仅在未闭合的img标签中起作用...为什么？如何解决？

Question

我试图在弹出模态框上创建以下精确效果。到目前为止我已经做到了，但HTML代码出现了问题（img标签没有关闭）。如果我修复了img标签，透视效果就会消失。有人可以解释一下原因并告诉我如何解决吗？根据这篇文章，在主包装器上添加perspective:100px。https://css-tricks.com/almanac/properties/p/perspective/

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();

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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  
  <div class="bg">
        <img class="front" src="https://shannels.com/fg.svg"
  </div>
    <div class="bg">
        <img class="front" src="https://shannels.com/mg.svg"
  </div>
      <div class="bg">
        <img class="front" src="https://shannels.com/bg.svg" 
  </div>
  
</div>

- AGrush

Answer 1

这段无效的代码会创建一个嵌套的img元素，您可以像下面这样创建：

<div class="bg">
    <img class="front" src="https://shannels.com/fg.svg">
    <div class="bg">
      <img class="front" src="https://shannels.com/mg.svg">
      <div class="bg">
        <img class="front" src="https://shannels.com/bg.svg">
      </div>
    </div>
  </div>

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();

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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">

  <div class="bg">
    <img class="front" src="https://shannels.com/fg.svg">
    <div class="bg">
      <img class="front" src="https://shannels.com/mg.svg">
      <div class="bg">
        <img class="front" src="https://shannels.com/bg.svg">
      </div>
    </div>
  </div>

</div>

我不确切知道浏览器是如何将代码转换的，但我认为我们不应该依赖于无效的代码。

看起来这部分

 <img class="front" src="https://shannels.com/fg.svg"
 </div>

浏览器认为 <img class="front" src="https://shannels.com/fg.svg"</div> (<img .. >) 是一种标签，因此您将缺少一个关闭的 div 标签，浏览器随后将尝试关闭所有 div 标签。这种技巧使代码易于复制粘贴以添加新层，但不能保证在所有浏览器中都能表现相同。

- Temani Afif

---

但是如果不嵌套，我该如何让透视图正常工作呢？ - AGrush

@JakeS 我认为你需要嵌套，因为缩放效果需要它。如果不嵌套，元素的缩放比例就无法增加。 - Temani Afif