html - 包裹在“块”元素中时,一切都消失了
问题描述
我正在使用我在 codepen 中找到的这种视差 3d 效果。但是我需要在所有 html 周围添加一个额外的包装器。当我将 html 内容包装在 a 中时,<div>
一切都消失了。当我将它包装在<span>
标签中时,一切都很好。另外,如果我将该<span>
标签设置为display:block;
一切都会再次消失。
当包裹在块元素中时,为什么会发生这种情况?
谢谢!
解决方案
添加时请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>
推荐阅读
- json - 反对在客户端创建 JWT 的论据
- javascript -
在我的 Nuxt js 应用程序中毁掉我的 CSS - javascript - 警告:React 无法识别 DOM 元素上的 `textColor` 属性
- excel - 如何让熊猫用字符串中的双引号读取excel
- python - 为什么我在 Visual Studio 代码中的 python 给我错误
- javascript - 当 IE 不再支持 ActiveXObject 时,如何在 IE11 中使用 js 获取客户端 ipAddress?
- munin - 如何阻止 munin 计算以毫秒为单位的值?
- java - 如何将 SimpleJaxWsServiceExporter 基地址与 Spring Boot 端口 8080 绑定
- python - 将抓取的数据保存在内存中
- c - 单链表头部为 0