translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）默认都是从左上角开始移动

这里的x,y为实际数字；

x,y为百分数时，是相当于移动的元素的宽+padding，高+padding的百分比。例子如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

     *{padding: 0;margin: 0;}

         .demo{

             width: 200px;

             height: 150px;

             background: #c66;

             color: #fff;

             padding-top: 50px;

             -webkit-transition:-webkit-transform 2s linear;

             -moz-transition:-moz-transform 2s linear;

             -ms-transition:-ms-transform 2s linear;

             -o-transition:-o-transform 2s linear;

             transition:transform 2s linear;

         }

         .demo:hover{

             -webkit-transform:-webkit-translate(100%,100%);

             -moz-transform:-moz-translate(100%,100%);

             -ms-transform:-ms-translate(100%,100%);

             -o-transform:-o-translate(100%,100%);

             transform:translate(100%,100%);

         }

     </style>

 </head>

 <body>

     <div class="demo">

         我想知道translate(100%,100%)是什么作用。

     </div>

 </body>

 </html>

css3 translate属性的更多相关文章

  1. 使用CSS3各个属性实现小人的动画

    使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...

  2. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  3. css3部分属性兼容性别扭写法（因为很多我就叫他别扭了，希望全面早早支持css3吧）

    /*圆角class,需要设置圆角的元素加上class名称*/ .roundedCorners{ -webkit-border-radius: 10px;/*webkit内核浏览器*/ -moz-bor ...

  4. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  5. css3新属性的学习使用

    display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...

  6. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  7. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  8. CSS3 transform 属性

    CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

  9. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

随机推荐

  1. Swift 动画学习笔记

    视频地址: http://www.swiftv.cn/course/i275v5lz 1,动画属性 position(位置),opacity(透明度,0 全透明,1 不透明),Scale(尺寸),Co ...

  2. Python3基础 使用技巧:多行同时缩进

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. CodeForces 552C Vanya and Scales

    Vanya and Scales Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u S ...

  4. 如何查看PowerShell版本

    Click Start, click All Programs, click Accessories, click Windows PowerShell, and then click Windows ...

  5. [数据结构与算法]栈Stack的多种实现

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  6. onclick事件分析

     有些时候,我们想实现这样的一种效果:      <a href="imgs/2.jpg" title="A fireworks display" onc ...

  7. 关于deferred

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 你不知道的css中的expression

    expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,[这里的CSS属性可以是元素固有的属性,也可以是自定义属性.]是动态设置CSS属性的强大方法,但也 ...

  9. 【T-SQL系列】FOR XML PATH 语句的应用

    DECLARE @TempTable TABLE ( UserID INT , UserName ) ); INSERT INTO @TempTable ( UserID, UserName ) , ...

  10. BestRW团队项目创意以及NABCD

    一.写在前面 这次的团队项目我们队选到的是自由选题,与其说是选,不如说是分配.毕竟我们组游戏排名倒数第二···其实当我第一次听说我们队排倒数第二的时候我是有点不爽的,毕竟在这后面能够抽到的题目都是剩下 ...