Question

我有两个问题。

1 - 如何在现实生活中正常转动左手，而不是像在演示中看到的那样？

2 - 如何将框架居中（高度）？

很多

我的代码：

    #screen {
    background: #6633CC; 
    border:1px solid #eee;
    height:600px;
    width:800px;
    top:0px;
    left:0px;
    margin:0;
    overflow:hidden;
    padding:0;
    position:relative;
}
#warp{
    margin:30px auto;
    border-style:solid;
    border-width:5px;
    border-color:#98bf21;
    width:420px;
    height:370px;
    }

#man{
    background: #6666CC;
    margin:0;
    float:left;
    border-style:solid;
    border-width:5px;
    border-color:#98bf21;
    width:200px;
    height:363px;
}
#manS{
    background: #6666AA;
    margin:0;
    float:right;
    border-style:solid;
    border-width:5px;
    border-color:#98bf21;
    width:200px;
    height:363px;
}
#Head{
    position: relative;
    left:30px;
}

#Body{
    position: relative;
    left:18px;
    top:-5px;
}
#Left_Hand{
    position: relative;
    left:12px;
    top:-125px;
}
#Right_Leg{
    position: relative;
    left:60px;
    top:-100px;
}
#Right_Hand{
    position: relative;
    left:97px;
    top:-393px;
}
#Left_Leg{
    position: relative;
    left:5px;
    top:-375px;
}

@-webkit-keyframes move_Head{
0%{-webkit-transform: translate(0px,0px) rotate(5deg) skew(0deg, 0deg) scale(1, 1);}
25%{-webkit-transform:translate(0px,320px) rotate(-5deg) skew(0deg, 0deg)scale(1,2);}
50%{-webkit-transform:translate(150px,320px) rotate(5deg) skew(0deg, 0deg)scale(2,1);}
75%{-webkit-transform:translate(150px,0px) rotate(-5deg) skew(0deg, 0deg)scale(1,2);}
100%{-webkit-transform:translate(0px,0px) rotate(0deg) skew(0deg, 0deg)scale(2,1);}
}
@-webkit-keyframes move_Body{
0%{-webkit-transform: translate(0px,0px) rotate(0deg) skew(5deg, 0deg) scale(1, 1);}
25%{-webkit-transform:translate(0px,100px) rotate(0deg) skew(-5deg, 0deg)scale(1,2);}
50%{-webkit-transform:translate(0px,0px) rotate(0deg) skew(0deg, -5deg)scale(2,1);}
75%{-webkit-transform:translate(0px,150px) rotate(0deg) skew(0deg, 5deg)scale(1,2);}
100%{-webkit-transform:translate(0px,0px) rotate(0deg) skew(0deg, 0deg)scale(2,1);}
}
@-webkit-keyframes move_Right_Leg{
0%{-webkit-transform: translate(0px,0px) rotate(0deg) skew(0deg, 0deg) scale(1, 1);}
12%{-webkit-transform:translate(0px,0px) rotate(40deg) skew(0deg, 0deg)scale(1,1);}
24%{-webkit-transform:translate(0px,0px) rotate(80deg) skew(0deg, 0deg)scale(1,1);}
36%{-webkit-transform:translate(0px,0px) rotate(120deg) skew(0deg, 0deg)scale(1,1);}
48%{-webkit-transform:translate(0px,0px) rotate(160deg) skew(0deg, 0deg)scale(1,1);}
60%{-webkit-transform:translate(0px,0px) rotate(200deg) skew(0deg, 0deg)scale(1,1);}
72%{-webkit-transform:translate(0px,0px) rotate(240deg) skew(0deg, 0deg)scale(1,1);}
84%{-webkit-transform:translate(0px,0px) rotate(280deg) skew(0deg, 0deg)scale(1,1);}
96%{-webkit-transform:translate(0px,0px) rotate(320deg) skew(0deg, 0deg)scale(1,1);}
100%{-webkit-transform:translate(0px,0px) rotate(360deg) skew(0deg, 0deg)scale(1,1);}
}

#animation-011
{
    -webkit-animation-name:move_Head;
    -webkit-animation-duration:5s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
}
#animation-022
{
    -webkit-animation-name:move_Body;
    -webkit-animation-duration:5s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
}
#animation-03
{
    -webkit-animation-name:move_Right_Leg;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
}

  <div id="screen">
    <div id="warp">
        <div id="man">
            <div id="animation-01">
                        <img id="Head"src="head.png" />            
            </div><!-- END animation-01-->
            <div id="animation-02">
                        <img id="Body"src="Body.png" />            
            </div><!-- END animation-02-->
            <div id="animation-03">
                        <img id="Left_Hand"src="Left_Hand.png" />            
            </div><!-- END animation-03-->
            <div id="animation-04">
                        <img id="Right_Leg"src="Left_Leg.png" />            
            </div><!-- END animation-04-->
            <div id="animation-05">
                        <img id="Right_Hand"src="Right_Hand.png" />            
            </div><!-- END animation-05-->
            <div id="animation-06">
                        <img id="Left_Leg"src="Right_Leg.png" />            
            </div><!-- END animation-06-->
        </div><!-- END MEN -->
        <div id="manS">
            <img id="ManStick"src="manStick.PNG" />
        </div><!-- END menS --> 
    </div><!-- END warp -->     
</div><!-- end TSCREEN -->

如何在特定点旋转元素？

0 个答案: