Fatal编程技术网
  • html/
  • Html 缩放会弄乱z索引

Html 缩放会弄乱z索引

html css animation

Html 缩放会弄乱z索引,html,css,animation,css-animations,z-index,Html,Css,Animation,Css Animations,Z Index,我有一组绝对div，它们有包含动画的背景图像。 当我对div应用scale属性时，它会完全弄乱我的z索引 这是指向小提琴的链接（取消注释转换：scale（）行） HTML代码 <div class='me'> <div class="torso"> <div class="left leg"> <div class="left thigh">

我有一组绝对div，它们有包含动画的背景图像。 当我对div应用scale属性时，它会完全弄乱我的z索引 这是指向小提琴的链接（取消注释转换：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>
请帮我解决这个问题。我查看了另一篇关于这个问题的帖子，但我无法纠正它。
谢谢你

不是z索引搞砸了，而是内部div相对于主
.me
div的相对大小。你可以将
.me
的大小调整为其原始大小的90%，然后再调整内部所有div的大小，这样它们最终会达到原始大小的81%

解决方案：仅对
.me
应用
刻度，而不是其中的div



.wrapper{
位置：相对位置；
}
我
.我司{
背景重复：无重复；
位置：绝对位置；
动画持续时间：2000ms；
动画迭代次数：无限；
动画计时功能：线性；
}
.我{
顶部：80px；
左：350px；
变换：缩放（0.9）；/*移动到此处*/
}
.躯干{
高度：274px；
宽度：86px；
背景图像：url（“https://s9.postimg.org/41xfy5cin/torso.png");
}
.手臂{
左：12px；
变换原点：20px 10px；
}
凯特先生{
宽度：395px；
高度：424px；
顶部：-115px；
左：0px；
背景图像：url（“https://s3.postimg.org/ix240ioab/kite.png");
变换：旋转（45度）比例（0.6）；
}
.右二头肌{
宽度：51px；
高度：124px；
背景图像：url（“https://s3.postimg.org/mlrszzyb7/right-bicep.png");
}
.左二头肌{
宽度：52px；
高度：126px；
背景图像：url（“https://s3.postimg.org/jb3g048dv/left-bicep.png");
}
.左前臂{
宽度：37px；
高度：124px；
背景图像：url（“https://s3.postimg.org/7ahzze0z7/left-forearm.png");
变换：旋转（-45度）；
}
.右前臂{
宽度：36px；
高度：121px；
背景图像：url（“https://s3.postimg.org/q6noj82ur/right-forearm.png");
动画名称：右前臂；
}
.左大腿{
宽度：69px；
高度：144px；
背景图像：url（“https://s3.postimg.org/577krq16b/left-thigh.png");
}
.右大腿{
宽度：69px；
高度：144px；
背景图像：url（“https://s3.postimg.org/72ud2vq0j/right-thigh.png");
}
申先生{
宽度：53px；
高度：173像素；
背景图像：url（“https://s3.postimg.org/3xecqews3/shin.png");
}
.英尺{
宽度：67px；
高度：34px；
背景图像：url（“https://s3.postimg.org/l0cj86o37/foot.png");
}
.脚趾{
宽度：28px；
高度：25px；
背景图像：url（“https://s3.postimg.org/vm0zxxjsj/toes.png");
}
.右臂{
顶部：93px；
动画名称：右二头肌；
}
.左臂{
顶部：87px；
变换：旋转（-26度）；
}
.前臂{
顶部：108px；
左：14px；
变换原点：3px7px；
}
.腿{
左：6px；
变换原点：30px 20px；
动画名称：大腿；
}
.右腿{
顶部：235px；
动画名称：右大腿；
}
.左腿{
顶部：225px；
动画名称：左大腿；
}
申先生{
顶部：115px；
变换原点：30px 25px；
}
.对，申{
动画名称：右心；
}
左。申{
动画名称：左心；
}
.英尺{
顶部：155px；
左：2px；
变换原点：0.50%；
}
.右脚{
动画名称：右脚；
}
.左脚{
动画名称：左脚；
}
.脚趾{
顶部：9px；
左：66px；
变换原点：0%100%；
}
.右脚趾{
动画名称：右脚趾；
}
.左脚趾{
动画名称：左脚趾；
}
右臂{
z指数：1；
}
左前臂{
z指数：-3；
}
俯卧臂>俯卧二头肌>俯卧前臂{
z指数：-1；
}
右腿{
z指数：-1；
}
左腿{
z指数：-2；
}
小腿>大腿>小腿{
z指数：-1；
}
@我的关键帧{
0% {
变换：旋转（5度）平移（5px，0px）；
}
25% {
变换：旋转（5度）平移（-5px，-14px）；
}
50% {
变换：旋转（5度）平移（5px，0px）；
}
75% {
变换：旋转（5度）平移（-5px，-14px）；
}
100% {
变换：旋转（5度）平移（5px，0px）；
}
}
@右二头肌关键帧{
0% {
变换：旋转（26度）；
}
50% {
变换：旋转（-20度）；
}
100% {
变换：旋转（26度）；
}
}
/*@左二头肌关键帧{
0%{变换：旋转（-20度）；}
50%{变换：旋转（26度）；}
100%{变换：旋转（-20度）；}
}*/
@右前臂关键帧{
0% {
变换：旋转（-10度）；
}
50% {
变换：旋转（-65度）；
}
100% {
变换：旋转（-10度）；
}
}
/*@左前臂关键帧{
0%{变换：旋转（-45度）；}
50%{变换：旋转（-10度）；}
100%{变换：旋转（-45度）；}
}*/
@右大腿关键帧{
0% {
变换：旋转（-45度）；
}
50% {
变换：旋转（10度）；
}
100% {
变换：旋转（-45度）；
}
}
@左大腿关键帧{
0% {
变换：旋转（10度）；
}
50% {
变换：旋转（-45度）；
}
100% {
变换：旋转（10度）；
}
}
@右胫骨关键帧{
0% {
变换：旋转（30度）；
}
25% {
变换：旋转（20度）；
}
50% {
变换：旋转（20度）；
}
75% {
变换：旋转（85度）；
}
100% {
变换：旋转（30度）；
}
}
@左胫骨关键帧{
0% {
变换：旋转（20度）；
}
25% {
变换：旋转（85度）；
}
50% {
变换：旋转（30度）；
}
75% {
变换：旋转（20度）；
}
100% {
变换：旋转（20度）；
}
}
@右脚关键帧{
0% {
变换：旋转（-5度）；
}
25% {
变换：旋转（-7度）；
}
50% {
变换：旋转（-16度）；
}
75% {
变换：旋转（-10度）；
}
100% {
变换：旋转（-5度）；
}
}
@左脚关键帧{
0% {
变换：旋转（-16度）；
}
25% {
变换：旋转（-10度）；
}
50% {
变换：旋转（-5度）；
}
75% {
变换：旋转（-7度）；
}
100% {
变换：旋转（-16度）；
}
}
@为右脚趾设置关键帧{
0% {
变换：旋转（0度）；
}
25% {
变换：旋转（-10度）；
}
50% {
变换：旋转

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



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



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