Maintaining Z-index Order After Rotated

This is my div structure

Solution 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;
}

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

Share