CSS 3D z 轴重叠上的元素

Question

我正在尝试在 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>

Answer 1

第二个元素显示为偏移了 1500 像素，但这就是 3D 变换所做的全部。要真正将它 "behind" 放在第一部分并隐藏它，您需要使用 z-index:

section:nth-of-type(1) { z-index: 2; }
section:nth-of-type(2) { z-index: 1; }

参见JSFiddle。

CSS 3D z 轴重叠上的元素

Elements on CSS 3D z-axis overlap

css

translate3d