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. Python3基础 if-else实例 判断输入的数字是否为8

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

  2. Luence学习笔记

    1.Luence的核心索引类 IndexWriter:建立索引的核心组件 Directory:代表一个lucene索引项的位置,是一个抽象类其子类有FSDirectory和RAMDirectory F ...

  3. uTenux——软件底层驱动组织结构介绍

    经过第一节对uTenux初步认识和第二节对uTenux\AT91SAM3S4C开发板的硬件结构的介绍,这一节我们将要学习的是uTenux\AT91SAM3S4C的软件底层驱动. 在悠龙公司的官网或者u ...

  4. awk 以HWI开头，并且：相邻两行的第一个字段完全相同；

    ## 思路:以HWI开头,并且:相邻两行的第一个字段完全相同:awk 'BEGIN{ last_col_1="xxxxxx"; last_row="bbbbbbbbbbb ...

  5. [51NOD1230]幸运数（数位DP）

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1230 dp(l,s,ss)表示长度为l的数各位和为s,各位平方 ...

  6. CUBRID学习笔记 36 在net中添加多行记录

    using System.Data.Common; using CUBRID.Data.CUBRIDClient; namespace Sample { class Add_MultipleRows ...

  7. python_way,day8 面向对象【多态、成员--字段 方法 属性、成员修饰符、特殊成员、异常处理、设计模式之单例模式、模块：isinstance、issubclass】

    python_way day8 一.面向对象三大特性: 多态 二.面向对象中的成员 字段.方法属性 三.成员修饰符 四.特殊成员 __init__.__doc__.__call__.__setitem ...

  8. return、 return false的用法

    1. return返回null,起到中断方法执行的效果,只要不return false事件处理函数将会继续执行,表单将提交2. return false,事件处理函数会取消事件,不再继续向下执行.比如 ...

  9. STL--STL和她的小伙伴们：

    STL--概述: 标准模板库(StandardTemplateLibrary,STL),是C++程序设计语言标准模板库.STL是由Alexander Stepanov.Meng Lee和David R ...

  10. [转]linux中如何安装软件？

    Linux下软件的安装与卸载     在Windows下安装软件时,只需运行软件的安装程序(setup.install等)或者用zip等解压缩软件解开即可安装,运行反安装程序 (uninstall.u ...