码迷,mamicode.com
首页 > Web开发 > 详细

css3 translate属性

时间:2015-01-26 18:43:36      阅读:7039      评论:0      收藏:0      [点我收藏+]

标签:

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

 

css3 translate属性

标签:

原文地址:http://www.cnblogs.com/MissBean/p/4250745.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!