translate:移动,transform的一个方法

              通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:
          用法transform: translate(50px, 100px);
              -ms-transform: translate(50px,100px);
              -webkit-transform: translate(50px,100px);
              -o-transform: translate(50px,100px);
              -moz-transform: translate(50px,100px);
 
transform:变形。改变
                 CSS3中主要包括 旋转:rotate() 顺时针旋转给定的角度,允许负值 rotate(30deg)
                   扭曲:skew() 元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:skew(30deg,20deg)
                   缩放:scale() 放大或缩小,根据给定的宽度(X 轴)和高度(Y 轴)参数: scale(2,4)
                   移动:translate() 平移,传进 x,y值,代表沿x轴和y轴平移的距离
                   所有的2D转换方法组合在一起: matrix()  旋转、缩放、移动以及倾斜元素
                   matrix(scale.x ,, , scale.y , translate.x, translate.y)      
   改变起点位置 transform-origin: bottom left;
   
   综合起来使用:transform: 30deg 1.5 30deg 20deg 100px 200px;
 
transition: 允许CSS属性值在一定的时间区间内平滑的过渡,
            需要事件的触发,例如单击、获取焦点、失去焦点等
            transition:property duration timing-function delay;
                   property:CSS的属性,例如:width height 为none时停止所有的运动,可以为transform
           
                   duration:持续时间
                   timing-function:ease等
                   delay:延迟
                   注意:当property为all的时候所有动画
            例如:transition:width 2s ease 0s;
            http://www.w3cplus.com/content/css3-transition

css3中的translate,transform,transition的区别的更多相关文章

  1. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  2. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

  3. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  4. css3中什么时候用transition什么时候用animation实现动画

    在css3中transition和animation都可以实现动画效果,但是我们什么时候用transition,什么时候用animation. 当有事件触发动画的时候我们就用transition.比如 ...

  5. css3的新特性transform,transition,animation

    一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等.这些的基础都是transform属性 transform属性 ...

  6. css 中 zoom和transform:scale的区别(转载)

    一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...

  7. css3中的过渡(transition)

    css3 transition(过渡)1.语法: transition:[ transition-property ] || [ transition-duration ] || [ transiti ...

  8. css3中的变形 transform详解

    一.变形-旋转 ratate()函数 通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这 个 ...

  9. sklearn中standardscaler中fit_transform()和transform()有什么区别,应该怎么使用?

    在根据机器学习书中提供的实例中,看到需要对训练和测试的特征数据进行标准化. 但是使用的是有两个函数, 对于训练数据,使用的是fit_transform()函数 对于测试数据,使用的是tansform( ...

随机推荐

  1. 少一些套路,多一些真诚 ——groovy消灭表现层套路

      初次认识groovy是在2009年,当时看了Manning出版的<Groovy in Action 1st Edition>,对groovy这个语言的交互性shell,以及灵活的语法留 ...

  2. 785. Is Graph Bipartite?从两个集合中取点构图

    [抄题]: Given an undirected graph, return true if and only if it is bipartite. Recall that a graph is  ...

  3. ECS 游戏架构 理解

    转载自:http://blog.csdn.net/i_dovelemon/article/details/25798677 理解 组件-实体-系统 (ECS \CES)游戏编程模型 - 博客频道   ...

  4. ORACLE 异机恢复

    有时候需要将大的数据库发布到客户现场或转移机器时,不得不考虑在异机上恢复已经调整.测试好的库. dumpdp 全备的方法虽然易用,但在处理对象.索引.空间的时候异常的出错,比如:见有些公司,建表.索引 ...

  5. Redis安装及HA(High Availability)配置(转)

    出处:http://www.cnblogs.com/morvenhuang/p/4184262.html Redis是一种内存数据库,以KEY-VALUE(即键值对)的形式存储数据.这篇文章主要介绍的 ...

  6. CodeForces 289B Polo the Penguin and Matrix (数学,中位数)

    题意:给定 n * m 个数,然后每次只能把其中一个数减少d, 问你能不能最后所有的数相等. 析:很简单么,首先这个矩阵没什么用,用一维的存,然后找那个中位数即可,如果所有的数减去中位数,都能整除d, ...

  7. Introduction mybatis

    项目地址 https://github.com/mybatis/mybatis-3 英文官网 http://mybatis.github.io/mybatis-3/ 中文官网 http://mybat ...

  8. Cannot change version of project facet Dynamic Web Module to 2.4.

    解决办法,找到项目目录,将.settings  target  .classpath  .project 删除 重新引入项目 原因是 web.xml 文件里<web-app 里的与.settin ...

  9. 视频分析(MATLAB)——MV分镜头图像分类

    引言:一个MV视频是有很多帧图像组合而成的,而一支MV是有多少个分镜头场景组合而成的呢?由MATLAB如何自动实现? 以<Love You Like A Love Song>的MV为例(这 ...

  10. FPGA的时钟质量对设计的影响

    小梅哥编写,未经许可严禁用于任何商业用途 近期,一直在调试使用Verilog编写的以太网发送摄像头数据到电脑的工程(以下简称以太网图传).该工程基于今年设计的一款FPGA教学板AC620.AC620上 ...