Scaling messes up the z-index

Question

I have a set of absolute divs having background images which contains animation. when i apply scale property to the divs it messes up my z-index totally here is the link to the fiddle https://jsfiddle.net/kq2soozp/3/ (Uncomment transform:scale() line)

The HTML Code

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

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

Please help me solve this issue. I looked into the other post about this problem but I am not able to correct it. Thank you

What's the necessity of the `animation-name` in the `.me` class? https://jsfiddle.net/kq2soozp/1/ — Goombah, Mar 31 '17 at 06:47
look at the keyframe "me" its animating the whole body. its not working now. I dont need help with that BTW. Its working in my complete application — Ankur Sahu, Mar 31 '17 at 06:54

score 1 · Answer 1 · edited May 23 '17 at 12:25

You can read this one

z-index is canceled by setting transform(rotate)

basically, transforming an element using 'transform' which gives the element its own stacking context that is different than other element which is not transformed. What you can do is make all element to transform, for example:

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

you want div 'a' to scale(0.9) and be on top of 'b'. you can make the div 'b' to transform to translate(0,0) or scale(0) which won't make any different. Or you can just transform the content inside of it (for my example it's an image element) instead of the div that wrapping it. then just apply the z-index to div.

score 0 · Answer 2 · answered Apr 04 '17 at 07:05

Since the transform property resets the stacking order of the elements, what i did is a wrapper div to the class "me" and apply transform scale property to the wrapper to reduce the size

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

here is the link to the working fiddle https://jsfiddle.net/kq2soozp/5/

Mr Lister · Answer 3 · 2017-03-31T07:37:15.010

It's not the z-index that is getting messed up, it's the relative size of the inner divs in relation to the main .me div. You resize .me to 90% of its original size, and then resize all the divs inside as well, so they end up at 81% of their original sizes.

Solution: apply the scale only to the .me and not to the divs in it.

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

By the way, some remarks:

// for a comment is an error in CSS. Don't do this. It happens to have no effect in your fiddle, but just look at this fiddle where it goes wrong.
You don't need the vendor prefixes during testing. Remove them and the code works in all browsers. If you want to be backwards compatible with older ones, fine, you can add in the prefixed properties (above the unprefixed ones), but do that after you're done twiddling with them.

The thing is when i put animate in the .me class then my scale property is failing again. Take a look at this fiddle https://jsfiddle.net/kq2soozp/4/ — Ankur Sahu, Mar 31 '17 at 07:45

Scaling messes up the z-index

3 Answers3