transform-style
transform-origin
animation
@keyframes
translate3d,translateX，，rotateY….
这些知识点有些涉及css3d动画，各个知识点的具体详解我就不解释了，有兴趣可以到这里了解一下：
http://isux.tencent.com/css3/index.html
回到这个案例，话说这么挫的动画是怎么具体实现的呢？ 我将分享代码给大家练习：
html结构：
XML/HTML Code复制内容到剪贴板
<body>
<div class="title">
<p>小黄人</p>
</div>
<div class="wrapper">
<div class="littleH">
<div class="light">
<div class="light_left">
</div>
<div class="light_right">
</div>
<div class="load"></div>
</div>
<div class="littleH_body">
<div class="leftHair"></div>
<div class="rightHair"></div>
<div class="leftBlackeye"></div>
<div class="leftWhiteeye"></div>
<div class="rightBlackeye"></div>
<div class="rightWhiteeye"></div>
<div class="mouse"></div>
<div class="leftFoot"></div>
<div class="rightFoot"></div>
</div>
</div>
</div>
</body>
css代码：
CSS Code复制内容到剪贴板
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.title p{
text-align: center;
font-size: 100px;
font-weight: bolder;
color:#333;
}
.wrapper{
margin: 400px auto;
}
.littleH{
position: relative;
