css3 translate属性

时间：2015-01-26 18:43:36 收藏：0 阅读：7039

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>

View Code