旋转后保持z索引顺序

Question

This is my div structure

<div id="outer">
   <div class="inner">
      <div>
         <div class="item"></div>   
      </div>
        <div class="itemBelow">
            <div class="innerBelow"></div>
        </div> 
   </div>
</div>

#outer{ /*parent and children - rotateable*/
  top:10px;
  width:220px;
  height:50px;
  position: absolute;
  background:blue;
}
.inner{
  top:35px;
  width:200px;
  height:75px;
  position: relative;
  background:green;
}
.item{
  top:60px;
  width:180px;
  height:100px;
  position: absolute;
  z-index: 4; /*to be top most div*/
  display: block;
  background:red;
}
.itemBelow{
  top:160px;
  width:160px;
  height:120px;
  position: relative;
  background:pink;
}
.innerBelow{
  top: 105px;
  width:140px;
  height:140px;
  position: relative;
  display: block;
  z-index: 1; /*to be lowest div*/
  background:lime;
}

I'm trying to rotate #outer div and its children.

$('#btn').click(function(){
    $('.outer').css({
        '-webkit-transform': 'rotateZ(45deg)',
        '-msTransform': 'rotateZ(45deg)',
        'transform': 'rotateZ(45deg)',
    });
}); 

But how can I maintain the z-index order after rotation? I expect the output to remain in the below z-index order before and after #outer is rotated.

item //top div
stillObj //second highest div
innerBelow //lowest div

I have created a mockup. See Fiddle

I have googled and come across many post like z-index and transform , transform-translate3d . But I'm unable to make this work.

Answer 1

You can use the css property transform-style to keep your 'stacking order' or z-index when using css3 3d transforms.

You can see in this fiddle , even when transformed, the element ( .item ) retained it's z-index value relative to the .stillObj .

You have to apply transform-style to both elements that need to retain their z-index and will also be 'interacting' with a 3d transform .

Here is an example of some of the types of structuring/class changes you'd have to make to your specific example in orderto keep the z-index values sticking: Fiddle .

It seems as if you need to put preserve-3d on the elements themselves (that will have a 3d transform ), not their parents in order to preserve the stacking order.

 $('#btn').click(function(){ $('.item').toggleClass('rotate'); }); 

 .stillObj{ height: 450px; width: 30px; background: #666; z-index:2;/*to be second height div*/ position: relative; } #outer{ /*parent and children - rotateable*/ top:10px; width:220px; height:50px; position: absolute; background:blue; } .inner{ top:35px; width:200px; height:75px; position: relative; background:green; } .item{ top:60px; width:180px; height:100px; position: absolute; z-index: 4; /*to be top most div*/ display: block; background:red; } .itemBelow{ top:160px; width:160px; height:120px; position: relative; background:pink; } .innerBelow{ top: 105px; width:140px; height:140px; position: relative; display: block; z-index: 1; /*to be lowest div*/ background:lime; } #btn{ margin-bottom: 50px; float: right; width: 200px; height: 60px; } .rotate { -webkit-transform: rotateZ(15deg); transform: rotateZ(15deg); } .item, .stillObj { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button type="button" id="btn">Click</button> <div class="stillObj"></div> <div id="outer"> <div class="inner"> <div> <div class="item"></div> </div> <div class="itemBelow"> <div class="innerBelow"></div> </div> </div> </div>