Elements on CSS 3D z-axis overlap

Question

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>

Why would say that it "looks like it's in front of the first element"? To me it looks like it's behind the first element. If you are asking yourself why you can still see it then, you need to add `z-index` (see my answer). — Noah Wetjen, Jun 09 '15 at 17:21

Noah Wetjen · Accepted Answer · 2015-06-09T21:08:24.710

2

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.

edited Jun 09 '15 at 21:08

answered Jun 09 '15 at 17:24

Noah Wetjen

1,695
2
17
30

1

Okay. I read somewhere else, that z-index is not working with translateZ. Or do I use it the wrong way? I have to rethink that. Thank you very much. I will mark your answer as the resolving answer, when nobody else comes with a translateZ-only answer. – Volker Andres Jun 09 '15 at 20:33
1

@VolkerAndres As you can see in the JSFiddle, it does indeed work ;-) Thank you very much and good luck with your project. – Noah Wetjen Jun 09 '15 at 20:51
1

Yes, I can see that. Thank you. Just wondering if there is another solution :) – Volker Andres Jun 09 '15 at 20:54

Elements on CSS 3D z-axis overlap

1 Answers1