css3.0 andriod人物构成 图形构成练习三

知识点

①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;
　　334px;
　　margin:100px auto;}
.head,.body{ position:relative; background:#28CA00;}
.head{
　　200px;
　　height:100px;
　　border-radius:110px 110px 0px 0px;
　　transition:all 0.1s ease-in;}
.l_eye,.r_eye{
　　background:#FFF;
　　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;
　　10px;
　　border-radius:5px;}
.l_ant{left:40px;}
.r_ant{right:40px;}
.body{
　　200px;
　　height:154px;
　　top:10px;
　　border-radius:0 0 25px 25px;}
.l_arm,.r_arm{
　　position:absolute;
　　top:10px;
　　height:110px;
　　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;
　　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>