csstranslate3d

Elements on CSS 3D z-axis overlap

I'm trying to arrange elements on a z-axis and want to order them. As you can see in the example, the second section looks like if it's above the first element (pink background) but has a lower value on the z-axis (-2500px). What am I missing?

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>

Solution

  • The second element is displayed like it is offset by 1500px, but that's all that the 3D transform does. To really put it "behind" the first section and hide it you need to use z-index:

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

    See JSFiddle.