我正在尝试在 z 轴上排列元素并希望对它们进行排序。正如您在示例中看到的那样，第二部分看起来像是在第一个元素(粉红色背景)上方，但在 z 轴上具有较低的值 (-2500px)。我错过了什么？
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#content,
#wrapper {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrapper {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#content {
-moz-perspective: 10000px;
-ms-perspective: 10000px;
-webkit-perspective: 10000px;
perspective: 10000px;
-webkit-transform: translate3d(0, 0, 0) perspective(10000px);
transform: translate3d(0, 0, 0) perspective(10000px);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
section {
position: absolute;
color: black;
opacity: 0;
left: 0;
top: 0;
overflow: hidden;
}
section.fullscreen {
height: 100%;
width: 100%;
}
section.fullscreen .section-content {
background: pink;
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
section:nth-of-type(2) {
color: red;
background: black;
}<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Z-Axis</title>
<link href="zaxis/zaxis.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div class="initialized" id="wrapper">
<div id="content">
<section style="transform: translate3d(-0.5px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;" id="start" class="fullscreen">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Accusamus adipisci aliquam aspernatur
atque aut blanditiis consectetur consequuntur delectus fugiat magnam,
necessitatibus nisi, nobis odio optio placeat quia repellendus rerum
sed?
</div>
</div>
</div>
</div>
</div>
</section>
<section style="transform: translate3d(25px, 193.5px, -1500px) scale3d(0.616406, 0.616406, 0.316406); opacity: 0.316406;" id="offer">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Accusamus adipisci aliquam aspernatur
atque aut blanditiis consectetur consequuntur delectus fugiat magnam,
necessitatibus nisi, nobis odio optio placeat quia repellendus rerum
sed?
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>最佳答案
第二个元素显示为偏移 1500 像素，但这就是 3D 变换所做的全部。要真正将它放在第一部分“后面”并隐藏它，您需要使用 z-index:
section:nth-of-type(1) { z-index: 2; }
section:nth-of-type(2) { z-index: 1; }
参见 JSFiddle .
关于css - CSS 3D z 轴上的元素重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30738503/