Question

这是我的div结构

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

我正在尝试轮换#outer div及其子女。

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

但是如何在旋转后保持z-index顺序？我希望在#outer旋转之前和之后输出保持在下面的z-index顺序。

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

我创建了一个模型。见Fiddle

我用Google搜索并发现许多帖子，例如z-index and transform，transform-translate3d。但我无法做到这一点。

Answer 1

您可以使用css属性transform-style来保留您的堆叠顺序＆＃39;或者使用css3 3d变换时z-index。

您可以在this fiddle中看到，即使转化，元素（.item）也会保留相对于z-index的{{1}}值。

您必须将.stillObj应用于两个元素，这些元素需要保留transform-style，并且还需要＆＃39;互动＆＃39;使用3d z-index。

以下是您必须对特定示例进行的结构/类更改的某些类型的示例，以保持transform值不变：{{ 3}}

好像你需要将z-index放在元素本身（将有一个3d preserve-3d）上，而不是它们的父母，以保留堆叠顺序。

＆＃13;

transform

＆＃13;

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

＆＃13;

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

＆＃13;

旋转后维持z-index顺序

1 个答案: