html - 当包裹在 "block"元素中时，一切都消失了

Question

我正在处理我在 codepen 中发现的这种视差 3d 效果。但是我需要在所有 html 周围添加一个额外的包装器。当我将 html 内容包装在 <div> 中时一切都消失了。当我将它包裹在 <span> 中时标记一切都很好。另外，如果我设置 <span>标记为 display:block;一切再次消失。

为什么包裹在 block 元素中会发生这种情况？

谢谢!

https://codepen.io/anon/pen/JapeJX

Answer 1

当您添加 display: block 时，请确保将其高度设置为 100%，因为其内部元素的高度设置为 %。

结帐 https://stackoverflow.com/a/5658062/7333443

代码笔:https://codepen.io/anon/pen/QVQJPR

!(function ($doc, $win) {
  var screenWidth = $win.screen.width / 2,
    screenHeight = $win.screen.height / 2,
    $elems = $doc.getElementsByClassName("elem"),
    validPropertyPrefix = "",
    otherProperty = "perspective(1000px)",
    elemStyle = $elems[0].style;

  if (typeof elemStyle.webkitTransform == "string") {
    validPropertyPrefix = "webkitTransform";
  } else if (typeof elemStyle.MozTransform == "string") {
    validPropertyPrefix = "MozTransform";
  }

  $doc.addEventListener("mousemove", function (e) {
    var centroX = e.clientX - screenWidth,
      centroY = screenHeight - (e.clientY + 13),
      degX = centroX * 0.02,
      degY = centroY * 0.01,
      $elem;

    for (var i = 0; i < $elems.length; i++) {
      $elem = $elems[i];
      $elem.style[validPropertyPrefix] =
        otherProperty + "rotateY(" + degX + "deg)  rotateX(" + degY + "deg)";
    }
  });
})(document, window);

/* CREDITS TO DESKTOPOGRAPHY FOR IMAGE USED */

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #004382;
  overflow: hidden;
}

.wrapper {
  transform-style: preserve-3d;
  margin: 0 auto;
  max-width: 982px;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-self: center;
  background: url("http://portalpacific.net/img/desk/icon-circles.png")
    no-repeat center center;
  background-size: contain;
}

.bloc {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-self: center;
  background-size: contain;
  background-position: center;
}

.content {
  transform: translateZ(80px) scale(1);
  -webkit-transform: translateZ(80px) scale(1);
  height: 100%;
  width: 100%;
  max-width: 720px;
  position: absolute;
  margin: auto;
  color: #fff;
  z-index: 3;
}
.content1 {
  background: url("http://portalpacific.net/img/desk/Website.png") no-repeat;
  background-position: center;
  max-width: 982px;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-self: center;
  background-size: contain;
}

.content p:nth-of-type(1) {
  font-size: 36px;
  line-height: 60px;
  position: absolute;
}
.content p:nth-of-type(2) {
  position: absolute;
}

.block {
  display: block;
  height: 100%;
}

<span class="block">
  <div class="wrapper elem" style="transform: perspective(700px) rotateY(0deg) rotateX(0deg);">
    <div class="bloc">
      <div class="content content1"></div>
      <div class="content content2">
      </div>
    </div>
  </div>
</span>