Everything disappears when wrapped in a "block" element - html

Question

I am working with this parallaxish 3d effect i found in a codepen. However I need to add an additional wrapper around all the html. When i wrap the html contents in a <div> everything disappears. When I wrap it in a <span> tag everything is fine. Also if i set that <span> tag to display:block; everything disappears again.
Why is this happening when wrapped in a block element?
Thanks!
https://codepen.io/anon/pen/JapeJX

Answer 1

When you add display: block make sure u set its height to 100% as its inner elements have height set in %.
Checkout https://stackoverflow.com/a/5658062/7333443
CodePen: 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>