CSS Translate忽略z-index

Question

我正在尝试将一个div动画化为另外三个，其中2个div与动画div重叠。

* {
  position:relative;
}

#left {
   background-color: red;
   width: 100px;
   height: 40px;
   z-index: 2;
 }
    
#right1 {
   background-color: green;
   width: 100px;   
   height: 20px;
   z-index: 5;
   
 }
 
 #right2 {
   background-color: blue;
   width: 100px;
   height: 20px;
   z-index: 1;
 }
 
  #right3 {
   background-color: yellow;
   width: 100px;
   height: 20px;
   z-index: 5;
 } 
 
 #groupe{
   display:flex;
   flex-direction:column;
   transform:translateX(-30px);
   
 }

<div style="display:flex;flex-direction:row;align-items:center;">
    <div id="left">      
    </div>
    <div id="groupe">        
        <div id="right1"></div>
        <div id="right2"></div>
        <div id="right3"></div>
    </div>
</div>

“ groupe”-ID应该适合以下其他类型：

我尝试过的解决方案：将div设置为相对位置并向左设置动画边缘不是一个机会