css3 translate属性
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）默认都是从左上角开始移动
这里的x,y为实际数字；
x,y为百分数时，是相当于移动的元素的宽+padding，高+padding的百分比。例子如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin: 0;} 8 .demo{ 9 width: 200px; 10 height: 150px; 11 background: #c66; 12 color: #fff; 13 padding-top: 50px; 14 -webkit-transition:-webkit-transform 2s linear; 15 -moz-transition:-moz-transform 2s linear; 16 -ms-transition:-ms-transform 2s linear; 17 -o-transition:-o-transform 2s linear; 18 transition:transform 2s linear; 19 } 20 .demo:hover{ 21 -webkit-transform:-webkit-translate(100%,100%); 22 -moz-transform:-moz-translate(100%,100%); 23 -ms-transform:-ms-translate(100%,100%); 24 -o-transform:-o-translate(100%,100%); 25 transform:translate(100%,100%); 26 } 27 </style> 28 </head> 29 <body> 30 <div class="demo"> 31 我想知道translate(100%,100%)是什么作用。 32 </div> 33 </body> 34 </html>
