0

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.

Community
  • 1
  • 1
Becky
  • 5,467
  • 9
  • 40
  • 73
  • @Harry. Thanks. Yes you are correct. I did post it few hours back but I felt I haven't added enough details in it for a answer. So I decided to remove it and create a fiddle and post more info in a fresh post. – Becky Nov 11 '15 at 16:35
  • 1
    @Harry No worries mate. I hope I'm not voilation any rules here and hopefully this question has enough info to understand my question better. – Becky Nov 11 '15 at 16:38
  • 1
    I am looking at your fiddle (tried it in Safari, Chrome and Firefox) - when I click the `button`, nothing happens. What is the intended behavior for it? – justinw Nov 11 '15 at 16:39
  • 1
    There are some problems in your fiddle please try to fix them firstly. – Zakaria Acharki Nov 11 '15 at 16:40
  • @Quoid: Thanks. `#outer` should rotate maintaining its z-indexes. – Becky Nov 11 '15 at 16:40
  • @Becky can you correct your fiddle, and then update your question? It's not functioning/displaying the issue you've described – justinw Nov 11 '15 at 16:42
  • @Quoid: Thanks. I've updated my post. https://jsfiddle.net/NathaliaZeed/g0mfk8cq/2/ – Becky Nov 11 '15 at 16:47
  • 1
    @ZakariaAcharki Thanks. I've updated my post. https://jsfiddle.net/NathaliaZeed/g0mfk8cq/2/ – Becky Nov 11 '15 at 16:48

1 Answers1

2

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>
justinw
  • 3,856
  • 5
  • 26
  • 41
  • Thanks Quold. I checked in chrome but only `#item` (red square) is rotating? I'm looking for a way to rotate `#outer` and its children to rotate simultaneously while maintaining their stacking order. – Becky Nov 11 '15 at 17:16
  • Right, I slimmed down the code to demonstrate how the solution works. It seems the elements with `z-index` are the ones that need the `preserve-3d` value. So you will have to adjust your code in order preserve your stacking order. It's very easy to implement into your current structure/code. – justinw Nov 11 '15 at 17:27
  • @Becky here is an [example](https://jsfiddle.net/wfemffv0/) of how you could/should alter your classes/structure but maintain the same type of effect - hope this helps a bit more – justinw Nov 11 '15 at 18:19
  • Just one more thing please. Other than `-webkit-` which other once should I use in my css? – Becky Nov 11 '15 at 19:31
  • @Becky it depends on the browser you want to support - I [use this website](http://shouldiprefix.com) a lot when to figure out my prefixes. I think `-ms` should be used with `transform` if you want IE 9 support - [This is also a great website for prefixes](http://pleeease.io/play/) – justinw Nov 11 '15 at 21:06