知识点
①translate（x,y,z）
X表示只在X轴(水平方向)移动元素。
Y表示只在Y轴(垂直方向)移动元素。
Z表示只在Z轴移动元素，前提是元素本身或者元素的父元素设定了透视值。
②Transation(all,none,ident)
示例：transition:width（表示单个元素） 0.5s(时间) ease(表现形式如ease-in,ease-out,ease-in-out);
Transation是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。
如果只针对单个或者多个CSS属性进行变换，就可以用这个属性来进行单独设置。
style
*{ padding:0; margin:0;}
.android{
height:404px;
width:334px;
margin:100px auto;}
.head,.body{ position:relative; background:#28CA00;}
.head{
width:200px;
height:100px;
border-radius:110px 110px 0px 0px;
transition:all 0.1s ease-in;}
.l_eye,.r_eye{
background:#FFF;
width:20px;
height:20px;
position:absolute;
top:42px;
border-radius:10px;}
.l_eye{ left:50px;}
.r_eye{ right:50px;}
.l_ant,.r_ant{
position:absolute;
top:-50px;
height:90px;
background:#28CA00;
width:10px;
border-radius:5px;}
.l_ant{left:40px;}
.r_ant{right:40px;}
.body{
width:200px;
height:154px;
top:10px;
border-radius:0 0 25px 25px;}
.l_arm,.r_arm{
position:absolute;
top:10px;
height:110px;
width:30px;
border-radius:30px;
background:#28CA00;}
.l_arm:hover{
transform:rotate(30deg) translate(-10px, 10px);
-webkit-transform:rotate(30deg) translate(-10px, 10px);
-moz-transform:rotate(30deg) translate(-10px, 10px);
-o-transform:rotate(30deg) translate(-10px, 10px);
}
.r_arm:hover{
-webkit-transform:rotate(-30deg) translate(10px, 10px);
-moz-transform:rotate(-30deg) translate(10px, 10px);
-o-transform:rotate(-30deg) translate(10px, 10px);
}
.head:hover{
-webkit-transform:rotate(-10deg) translate(-10px, -10px);
}
.l_arm{ left:-40px;}
.r_arm{ right:-40px;}
.l_leg,.r_leg{
position:absolute;
top:130px;
height:90px;
width:30px;
border-radius:30px;
background:#28CA00;}
.l_leg{left:40px;}
.r_leg{right:40px;}
html
<div class="android">
<div class="head">
<div class="l_ant"></div>
<div class="r_ant"></div>
<div class="l_eye"></div>
<div class="r_eye"></div>
</div>
<div class="body">
<div class="l_arm"></div>
<div class="r_arm"></div>
<div class="l_leg"></div>
<div class="r_leg"></div>
</div>
</div>
