缩放会使z-index混乱

时间：2017-03-31 06:41:29

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

我有一组具有背景图像的绝对div，其中包含动画。 当我将scale属性应用于div时，它完全弄乱了我的z-index 这里是小提琴https://jsfiddle.net/kq2soozp/3/的链接（取消注释变换：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); }
}

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

3 个答案:

答案 0 :(得分：1)

你可以阅读这个

z-index is canceled by setting transform(rotate)

基本上，使用＆＃39;转换＆＃39;来转换元素。它赋予元素自己的堆叠上下文，该上下文与未转换的其他元素不同。你可以做的是让所有元素都变换，例如：

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

你想要div＆＃39; a＆＃39;缩放（0.9）并位于＆＃39; b＆＃39;之上。你可以制作div＆＃39; b＆＃39;转换为翻译（0,0）或缩放（0），不会产生任何不同。或者你可以只改变它里面的内容（对于我的例子，它是一个图像元素）而不是包装它的div。然后只需将z-index应用于div。

答案 1 :(得分：0)

不是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。
  • 测试期间不需要供应商前缀。删除它们，代码适用于所有浏览器。如果你想向后兼容旧的，那么你可以添加前缀属性（在未加前缀的属性之上），但是在你完成它们之后就这样做了。

答案 2 :(得分：0)

由于transform属性重置了元素的堆叠顺序，我所做的是对类的包装div＆＃34; me＆＃34;并将transform scale属性应用于包装器以减小大小

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

这是工作小提琴https://jsfiddle.net/kq2soozp/5/

的链接
相关问题
最新问题