title: z-index of 3D-transformed objects
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector( 'style' ).innerHTML += `
     /* rotation animations*/
    .rotate_x, .rotate_y, span {
      animation-name: rotateX;
      animation-duration: calc( var( --duration ) * 1s );
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
    @keyframes rotateX {
      0% { transform: rotateX( 0deg ); }
      100% { transform: rotateX( 360deg ); }  
    }
    .rotate_y { animation-name: rotateY; }
    @keyframes rotateY {
      0% { transform: rotateY( 0deg ); }
      100% { transform: rotateY( 360deg ); }  
    }
    
    /* hidden circle inside cube */
    hr {
      position: absolute; 
      z-index: 1000; 
      border-style: none; 
      border-radius: 10rem;
      width: 10rem; height: 10rem; 
      background-color: rgba( 50,200,150,1 );
    }  
  `;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* main */
  :root {
    font-size: 0.65rem; /* decreased font-size to fit cube in viewport */
    --duration: 10; 
    --quarter_time: calc( var( --duration ) / 4 ); 
    --eighth_time: calc( var( --duration ) / 8 );
    --bright: 125; --mid: 100; --dark: 75;
  }
  * {
    box-sizing: border-box;
    transform-style: preserve-3d;
    margin: 0; padding: 0;
  }
  html, body { height: 100%; }
  body, span {
    display: flex;
    justify-content: center; 
    align-items: center;
  }
  body { perspective: 30rem; }
  section, div, span {
    position: absolute;
    width: 10rem; height: 10rem;
  }
  span {
    background-color: rgba( 50,150,200,1 );
  }
  div span:nth-of-type( 1 ) { transform: translateZ( 5rem ); }
  div span:nth-of-type( 2 ) { transform: rotateY( 180deg ) translateZ( 5rem ); }
  .left_right { transform: rotateY( 90deg ); }
  .top_bottom { transform: rotateX( 90deg ); }
  /* Note: Some CSS was moved to the HTML and Javascript windows of the snippet
  only to eliminate scrolling and for readability on desktops.</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style&gt;
     /* face brightness animations*/
    .x_lighting span { animation-name: frontFaces; }
    .front_back span, .top_bottom span {
      animation-duration: calc( var( --quarter_time ) * 1s );
      animation-timing-function: ease-in-out; animation-direction: alternate;
    }
    .top_bottom span, .x_y_lighting .left_right span { 
      animation-direction: alternate-reverse; 
    }
    @keyframes frontFaces {
      0% { filter: brightness( calc( var( --bright ) * 1% ) ); }
      100% { filter: brightness( calc( var( --dark ) * 1% ) ); }    
    }
    .x_y_lighting .left_right span {
      animation-name: sideFaces; animation-duration: calc( var( --eighth_time ) * 1s );
    }
    @keyframes sideFaces {
      0% { filter: brightness( calc( var( --mid ) * 1% ) ); }
      100% { filter: brightness( calc( var( --dark ) * 1% ) ); } 
    }
  &lt;/style&gt;
  &lt;body class='x_lighting x_y_lighting'&gt;
    &lt;section class='cube_cont rotate_x'&gt;
      &lt;section class='cube_wrap rotate_y'&gt;
        &lt;section class='cube rotate_y'&gt; &lt;hr&gt;
          &lt;div class='front_back'&gt; &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt; &lt;/div&gt;
          &lt;div class='left_right'&gt; &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt; &lt;/div&gt;
          &lt;div class='top_bottom'&gt; &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt; &lt;/div&gt;
        &lt;/section&gt;
      &lt;/section&gt;
    &lt;/section&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When you have a 3D constructed object in CSS ( such as a cube ) that has children elements located &quot;inside&quot; of that 3D object in 3D space and you want to show that child element <em>through</em> the parent or &quot;on top of&quot; the parent element - what is the best way to achieve such an effect?</p>
  <p>This might be best understood visually so in the snippet above inside of the cube I have an <code>hr</code> element in the HTML that I styled as a green circle. It can't be seen because its directly inside of the opaque cube but when you change the opacity of the cube you see it through the faces:</p>
  <p><a href="https://i.stack.imgur.com/0hmoE.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0hmoE.gif" alt="enter image description here" /></a></p>
  <p>One line of code that appears ignored is the z-index I set on the <code>hr</code>:</p>
  <pre><code>  /* hidden circle inside cube */
    hr {
      position: absolute; 
      z-index: 1000; 
      border-style: none; 
      border-radius: 10rem;
      width: 10rem; height: 10rem; 
      background-color: rgba( 50,200,150,1 );
    }  
  </code></pre>
  <p>I set the <code>z-index</code> to <code>1000</code> however the expected result isn't displayed in the snippet above. To be clear:
  <strong>How do I set the z-index of the child element greater than the parent element so the circle shows on top of the cube but keeps it's position in 3D space? ( without making the cube transparent )</strong></p>
  <p><em>There are questions like this: <a href="https://stackoverflow.com/questions/2503705/how-to-get-a-child-element-to-show-behind-lower-z-index-than-its-parent">how-to-get-a-child-element-to-show-behind-lower-z-index-than-its-parent</a> that have answers that rely on hacks using 3D transforms. Yet I can't do that here because my child and parent are 3D transformed objects themselves. Also these questions aren't exactly asking the same thing here. So what's a CSS solution to going about this?</em></p>