缩放会弄乱 z-index答案

【问题标题】：Scaling messes up the z-index缩放会弄乱 z-index
【发布时间】：2017-08-25 08:04:01
【问题描述】：

我有一组包含动画的背景图像的绝对 div。当我将 scale 属性应用于 div 时，它完全弄乱了我的 z-index 这是小提琴https://jsfiddle.net/kq2soozp/3/的链接（取消注释transform：scale（）行）

HTML 代码

<div class='me'>

            <div class="torso">
                <div class="left leg">
                    <div class="left thigh">
                        <div class="left shin">
                            <div class="left foot">
                                <div class="left toes"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="right leg">
                    <div class="right thigh">
                        <div class="right shin">
                            <div class="right foot">
                                <div class="right toes"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="left arm">
                    <div class="left bicep">
                        <div class="left forearm">
                            <div class="kite"></div>
                        </div>
                    </div>
                </div>

                <div class="right arm">
                    <div class="right bicep">
                        <div class="right forearm"></div>
                    </div>
                </div>

            </div>
        </div>

CSS

.me,.me div{
    background-repeat: no-repeat;
    position: absolute;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    //-webkit-transform: scale(0.9);
}
.me{
    top: 80px;
    left: 350px;
    -webkit-animation-name: me;
}
.torso{
    height: 274px;
    width: 86px;
    background-image: url("https://s9.postimg.org/41xfy5cin/torso.png");
}

.arm{
    left: 12px;
    -webkit-transform-origin: 20px 10px;
}

.kite{

    width: 395px;
    height: 424px;
    top: -115px;
    left: 0px;

    background-image: url("https://s3.postimg.org/ix240ioab/kite.png");
    -webkit-transform: rotate(45deg) scale(0.6);

}
.right.bicep{
    width: 51px;
    height: 124px;
    background-image: url("https://s3.postimg.org/mlrszzyb7/right-bicep.png");
}
.left.bicep{
    width: 52px;
    : 126px;
    background-image: url("https://s3.postimg.org/jb3g048dv/left-bicep.png");
}
.left.forearm{
    width: 37px;
    height: 124px;
    background-image: url("https://s3.postimg.org/7ahzze0z7/left-forearm.png");
    -webkit-transform: rotate(-45deg);
}
.right.forearm{
    width: 36px;
    height: 121px;
    background-image: url("https://s3.postimg.org/q6noj82ur/right-forearm.png");
    -webkit-animation-name: right-forearm;
}
.left.thigh{
    width: 69px;
    height: 144px;
    background-image: url("https://s3.postimg.org/577krq16b/left-thigh.png");
}
.right.thigh{
    width: 69px;
    height: 144px;
    background-image: url("https://s3.postimg.org/72ud2vq0j/right-thigh.png");
}
.shin{
    width: 53px;
    height: 173px;
    background-image: url("https://s3.postimg.org/3xecqews3/shin.png");
}
.foot{
    width: 67px;
    height: 34px;
    background-image: url("https://s3.postimg.org/l0cj86o37/foot.png");
}
.toes{
    width: 28px;
    height: 25px;
    background-image: url("https://s3.postimg.org/vm0zxxjsj/toes.png");
}

.right.arm{
    top: 93px;
    -webkit-animation-name: right-bicep;

}
.left.arm{
    top: 87px;
    -webkit-transform: rotate(-26deg);
}
.forearm{
    top: 108px;
    left: 14px;
    -webkit-transform-origin: 3px 7px;
}
.leg{
    left: 6px;
    -webkit-transform-origin: 30px 20px;
    -webkit-animation-name: thigh;
}
.right.leg{
    top: 235px;
    -webkit-animation-name: right-thigh;
}
.left.leg{
    top:225px;
    -webkit-animation-name: left-thigh;
}
.shin{
    top: 115px;
    -webkit-transform-origin: 30px 25px;
}
.right.shin { 
    -webkit-animation-name: right-shin; 
}
.left.shin {
    -webkit-animation-name: left-shin; 
}
.foot{
    top: 155px;
    left: 2px;
    -webkit-transform-origin: 0 50%;
}
.right.foot { 
    -webkit-animation-name: right-foot; 
}
.left.foot { 
    -webkit-animation-name: left-foot; 
}
.toes{
    top: 9px;
    left: 66px;
    -webkit-transform-origin: 0% 100%;
}
.right.toes { 
    -webkit-animation-name: right-toes; 
}
.left.toes { 
    -webkit-animation-name: left-toes; 
}
div.right.arm { z-index: 1; }
div.left.arm { z-index: -3; }
div.arm > div.bicep > div.forearm { z-index: -1; }

div.right.leg { z-index: -1; }
div.left.leg { z-index: -2; }
div.leg > div.thigh > div.shin { z-index: -1; }

@-webkit-keyframes me {
    0% { -webkit-transform:   rotate(5deg) translate( 10px,   0px); }
    25% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
    50% { -webkit-transform:  rotate(5deg) translate( 10px,   0px); }
    75% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
    100% { -webkit-transform: rotate(5deg) translate( 10px,   0px); }
}
@-webkit-keyframes right-bicep {
    0%   { -webkit-transform: rotate(26deg); }
    50%  { -webkit-transform: rotate(-20deg); }
    100% { -webkit-transform: rotate(26deg); }
}

/*@-webkit-keyframes left-bicep {
    0%   { -webkit-transform: rotate(-20deg); }
    50%  { -webkit-transform: rotate(26deg); }
    100% { -webkit-transform: rotate(-20deg); }
}*/

@-webkit-keyframes right-forearm {
    0%   { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-65deg); }
    100% { -webkit-transform: rotate(-10deg); }
}

/*@-webkit-keyframes left-forearm {
    0%   { -webkit-transform: rotate(-45deg); }
    50%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-45deg); }
}*/

@-webkit-keyframes right-thigh {
    0%   { -webkit-transform: rotate(-45deg); }
    50%  { -webkit-transform: rotate(10deg); }
    100% { -webkit-transform: rotate(-45deg); }
}

@-webkit-keyframes left-thigh {
    0%   { -webkit-transform: rotate(10deg); }
    50%  { -webkit-transform: rotate(-45deg); }
    100% { -webkit-transform: rotate(10deg); }
}

@-webkit-keyframes right-shin {
    0%   { -webkit-transform: rotate(30deg); }
    25%  { -webkit-transform: rotate(20deg); }
    50%  { -webkit-transform: rotate(20deg); }
    75%  { -webkit-transform: rotate(85deg); }
    100% { -webkit-transform: rotate(30deg); }
}

@-webkit-keyframes left-shin {
    0%   { -webkit-transform: rotate(20deg); }
    25%  { -webkit-transform: rotate(85deg); }
    50%  { -webkit-transform: rotate(30deg); }
    75%  { -webkit-transform: rotate(20deg); }
    100% { -webkit-transform: rotate(20deg); }
}

@-webkit-keyframes right-foot {
    0%   { -webkit-transform: rotate(-5deg); }
    25%  { -webkit-transform: rotate(-7deg); }
    50%  { -webkit-transform: rotate(-16deg); }
    75%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-5deg); }
}

@-webkit-keyframes left-foot {
    0%   { -webkit-transform: rotate(-16deg); }
    25%  { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-5deg); }
    75%  { -webkit-transform: rotate(-7deg); }
    100% { -webkit-transform: rotate(-16deg); }
}

@-webkit-keyframes right-toes {
    0%   { -webkit-transform: rotate(0deg); }
    25%  { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-10deg); }
    75%  { -webkit-transform: rotate(-25deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes left-toes {
    0%   { -webkit-transform: rotate(-10deg); }
    25%  { -webkit-transform: rotate(-25deg); }
    50%  { -webkit-transform: rotate(0deg); }
    75%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-10deg); }
}

请帮我解决这个问题。我查看了有关此问题的另一篇文章，但无法纠正。谢谢

【问题讨论】：

animation-name 在.me 类中有什么必要性？ jsfiddle.net/kq2soozp/1
看看关键帧“我”，它为整个身体设置了动画。它现在不工作。顺便说一句，我不需要帮助。它在我的完整应用程序中工作

标签： html css animation css-animations z-index

【解决方案1】：

你可以看这篇

z-index is canceled by setting transform(rotate)

基本上，使用“transform”转换元素，它为元素提供自己的堆叠上下文，该上下文不同于未转换的其他元素。您可以做的是让所有元素进行转换，例如：

<div class="a"><img src="..."></div>
<div class="b"><img src="..."></div>

您希望 div 'a' 缩放（0.9）并位于 'b' 之上。您可以将 div 'b' 转换为 translate(0,0) 或 scale(0) ，这不会有任何不同。或者您可以只转换其中的内容（对于我的示例，它是一个图像元素），而不是包装它的 div。然后只需将 z-index 应用于 div。

【讨论】：

【解决方案2】：

由于 transform 属性重置了元素的堆叠顺序，我所做的是一个包装器 div 到类“me”，并将 transform scale 属性应用于包装器以减小大小

.wrapper{
    -webkit-transform: scale(0.4);
}

这里是工作小提琴https://jsfiddle.net/kq2soozp/5/的链接

【讨论】：

【解决方案3】：

搞砸的不是 z-index，而是内部 div 相对于主 .me div 的相对大小。您将.me 的大小调整为原始大小的 90%，然后将内部所有 div 的大小也调整为原始大小的 81%。

解决方案：仅将scale 应用于.me，而不应用于其中的div。

.wrapper {
  position: relative;
}

.me,
.me div {
  background-repeat: no-repeat;
  position: absolute;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.me {
  top: 80px;
  left: 350px;
  transform: scale(0.9);   /* moved here */
}

.torso {
  height: 274px;
  width: 86px;
  background-image: url("https://s9.postimg.org/41xfy5cin/torso.png");
}

.arm {
  left: 12px;
  transform-origin: 20px 10px;
}

.kite {
  width: 395px;
  height: 424px;
  top: -115px;
  left: 0px;
  background-image: url("https://s3.postimg.org/ix240ioab/kite.png");
  transform: rotate(45deg) scale(0.6);
}

.right.bicep {
  width: 51px;
  height: 124px;
  background-image: url("https://s3.postimg.org/mlrszzyb7/right-bicep.png");
}

.left.bicep {
  width: 52px;
  height: 126px;
  background-image: url("https://s3.postimg.org/jb3g048dv/left-bicep.png");
}

.left.forearm {
  width: 37px;
  height: 124px;
  background-image: url("https://s3.postimg.org/7ahzze0z7/left-forearm.png");
  transform: rotate(-45deg);
}

.right.forearm {
  width: 36px;
  height: 121px;
  background-image: url("https://s3.postimg.org/q6noj82ur/right-forearm.png");
  animation-name: right-forearm;
}

.left.thigh {
  width: 69px;
  height: 144px;
  background-image: url("https://s3.postimg.org/577krq16b/left-thigh.png");
}

.right.thigh {
  width: 69px;
  height: 144px;
  background-image: url("https://s3.postimg.org/72ud2vq0j/right-thigh.png");
}

.shin {
  width: 53px;
  height: 173px;
  background-image: url("https://s3.postimg.org/3xecqews3/shin.png");
}

.foot {
  width: 67px;
  height: 34px;
  background-image: url("https://s3.postimg.org/l0cj86o37/foot.png");
}

.toes {
  width: 28px;
  height: 25px;
  background-image: url("https://s3.postimg.org/vm0zxxjsj/toes.png");
}

.right.arm {
  top: 93px;
  animation-name: right-bicep;
}

.left.arm {
  top: 87px;
  transform: rotate(-26deg);
}

.forearm {
  top: 108px;
  left: 14px;
  transform-origin: 3px 7px;
}

.leg {
  left: 6px;
  transform-origin: 30px 20px;
  animation-name: thigh;
}

.right.leg {
  top: 235px;
  animation-name: right-thigh;
}

.left.leg {
  top: 225px;
  animation-name: left-thigh;
}

.shin {
  top: 115px;
  transform-origin: 30px 25px;
}

.right.shin {
  animation-name: right-shin;
}

.left.shin {
  animation-name: left-shin;
}

.foot {
  top: 155px;
  left: 2px;
  transform-origin: 0 50%;
}

.right.foot {
  animation-name: right-foot;
}

.left.foot {
  animation-name: left-foot;
}

.toes {
  top: 9px;
  left: 66px;
  transform-origin: 0% 100%;
}

.right.toes {
  animation-name: right-toes;
}

.left.toes {
  animation-name: left-toes;
}

div.right.arm {
  z-index: 1;
}

div.left.arm {
  z-index: -3;
}

div.arm>div.bicep>div.forearm {
  z-index: -1;
}

div.right.leg {
  z-index: -1;
}

div.left.leg {
  z-index: -2;
}

div.leg>div.thigh>div.shin {
  z-index: -1;
}

@keyframes me {
  0% {
    transform: rotate(5deg) translate( 5px, 0px);
  }
  25% {
    transform: rotate(5deg) translate(-5px, -14px);
  }
  50% {
    transform: rotate(5deg) translate( 5px, 0px);
  }
  75% {
    transform: rotate(5deg) translate(-5px, -14px);
  }
  100% {
    transform: rotate(5deg) translate( 5px, 0px);
  }
}

@keyframes right-bicep {
  0% {
    transform: rotate(26deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(26deg);
  }
}


/*@keyframes left-bicep {
    0%   { transform: rotate(-20deg); }
    50%  { transform: rotate(26deg); }
    100% { transform: rotate(-20deg); }
}*/

@keyframes right-forearm {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-65deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}


/*@keyframes left-forearm {
    0%   { transform: rotate(-45deg); }
    50%  { transform: rotate(-10deg); }
    100% { transform: rotate(-45deg); }
}*/

@keyframes right-thigh {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}

@keyframes left-thigh {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

@keyframes right-shin {
  0% {
    transform: rotate(30deg);
  }
  25% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(85deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes left-shin {
  0% {
    transform: rotate(20deg);
  }
  25% {
    transform: rotate(85deg);
  }
  50% {
    transform: rotate(30deg);
  }
  75% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}

@keyframes right-foot {
  0% {
    transform: rotate(-5deg);
  }
  25% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(-16deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

@keyframes left-foot {
  0% {
    transform: rotate(-16deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(-7deg);
  }
  100% {
    transform: rotate(-16deg);
  }
}

@keyframes right-toes {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes left-toes {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

<div class="wrapper">


  <div class='me'>

    <div class="torso">
      <div class="left leg">
        <div class="left thigh">
          <div class="left shin">
            <div class="left foot">
              <div class="left toes"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="right leg">
        <div class="right thigh">
          <div class="right shin">
            <div class="right foot">
              <div class="right toes"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="left arm">
        <div class="left bicep">
          <div class="left forearm">
            <div class="kite"></div>
          </div>
        </div>
      </div>

      <div class="right arm">
        <div class="right bicep">
          <div class="right forearm"></div>
        </div>
      </div>

    </div>
  </div>
</div>

顺便说一句：

// 注释是 CSS 中的错误。不要这样做。它碰巧对你的小提琴没有影响，但是看看this fiddle哪里出错了。
在测试期间您不需要供应商前缀。删除它们，代码可以在所有浏览器中使用。如果你想向后兼容旧的，很好，你可以添加前缀属性（在无前缀的属性之上），但是在你玩完它们之后再做。

【讨论】：

问题是当我将 animate 放入 .me 类时，我的 scale 属性再次失败。看看这个小提琴jsfiddle.net/kq2soozp/4
@Lister 请查看评论