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. 完成Adventure中的主方法

    package a; public interface CanSwim { void swim(); } package a; public interface CanFly { void fly() ...

  2. 阻止js冒泡

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

  3. 最大熵模型（Maximum Etropy）—— 熵，条件熵，联合熵，相对熵，互信息及其关系，最大熵模型。。

    引入1:随机变量函数的分布 给定X的概率密度函数为fX(x), 若Y = aX, a是某正实数,求Y得概率密度函数fY(y). 解:令X的累积概率为FX(x), Y的累积概率为FY(y). 则 FY( ...

  4. 青岛理工大学第五届ACM交流赛 部分题解

    A:后缀维护si*pi的最小值,查询的时候二分,判断后缀和当前两个部分就行. #include <bits/stdc++.h> using namespace std; typedef l ...

  5. Field+offset(len)

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

  6. ABAP基本数据类型、通用类型

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

  7. hdu 4946 Just a Joke(数学+物理)

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=4969 Just a Joke Time Limit: 2000/1000 MS (Java/Others) ...

  8. iOS - AudioServicesPlay 短频音效播放

    前言 extern void AudioServicesPlayAlertSound(SystemSoundID inSystemSoundID) __OSX_AVAILABLE_STARTING(_ ...

  9. struts2 if正确标签示例

    下面总结一下struts2 中if标签的使用 (1)判断字符串是否为空 <s:if test="user.username==null or user.username==''&quo ...

  10. iOS 设置button中图文位置

    方法一. -(CGRect)imageRectForContentRect:(CGRect)contentRect {    return CGRectMake(self.width - kImage ...