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. 分别向Set集合以及List集合中添加"A"、"a"、"c"、"C"、"a"，观察重复值"a"能否添加成功

    package lianxi; import java.util.*; public class JhSet { public static void main(String[] args) { Se ...

  2. BZOJ 3514 Codechef MARCH14 GERALD07加强版

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3514 题意:给出一个图m条边.每次询问只加入编号在区间[L,R]之内的边有多少连通 ...

  3. FreeSWITCH的TLS加密

    听着很高大上(实际也很实用)的加密机制,在FreeSWITCH里配置支持竟然这么简单! Greate FreeSWITCH and Greate Programmer! ① cd /usr/local ...

  4. slogan

    nasa to infinity and beyond Werner Vogels at amazon all things distributed Kelly Johnson at Lockheed ...

  5. MVC--View Razor（1）

    (1)输出单一变量: 当前时间:@DateTime.Now (2)输入HTML:@:这是HTML项 (3)C#与HTML混合,输出多行HTML文本时 <text>html文本..</ ...

  6. spring事务知识

    事务的传播行为? 在Spring 的事务中, _可以通过 propagation 来定义事务的传播行为_: PROPAGATION_required:如果当前没有事务,就新建一个事务,如果已经存在一个 ...

  7. poj1066Treasure Hunt（线段相交）

    链接 很纠结的找到了所有线段的中点,又很纠结的找到了哪些中点可以直接相连,最后bfs一下求出了最短路.. #include <iostream> #include<cstdio> ...

  8. ORA-32004 参数设置过时的解决办法

    启动时报错: 查看日志: view /opt/oracle11g/app/db/diag/rdbms/yldev/yldev/trace/alert_yldev.log 原来是plsql_debug ...

  9. Python的lambda表达式

    使用lambda来创建匿名函数,而用def创建的方法是有名称的,除了从表面上的方法名不一样外,python lambda还有哪些和def不一样呢? 1 python lambda会创建一个函数对象,但 ...

  10. Java源码初学_ArrayList

    一.ArrayList的构造器和构造方法 在ArrayList中定义了两个空数组,分别对应当指定默认构造方法时候,指向的数组已经给定容量,但是容量等于0的时候,指向的数组.此外在构造函数中传入Coll ...