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. Github 使用的Markdown语言

    简介 官方站点:http://daringfireball.net/projects/markdown/syntax 中文介绍:http://www.worldhello.net/gotgithub/ ...

  2. 关于fastjson的一些知识

    今天被问到了一些有关fastjson的知识,问了fastjson内部的实现机制,笔者只是用过fastjson这个包,还真没了解过它的机制等. 下去后搜索了一些有关fastjson的知识,希望能对自己和 ...

  3. nltk 之 snowball 提取词干-乾颐堂

    机器学习中很重要的应用场景就是机器自动分类,而分类的关键是词干提取.所以我们要用到snowball.下面说一下snowball 提取词干的两种方法. 两种方法: 方法一: >>> f ...

  4. 如何在IIS中承载WCF NetTcpBinding 服务

    这篇博客将介绍如何在IIS中承载NetTcpBinding的服务. 1. 首先准备服务代码. Contract namespace Contract { [ServiceContract] publi ...

  5. 实践作业4---DAY2阶段一。

    由于CSDN博客没有班级博客栏目,所以在该项功能上无法与博客园进行对比,我们将就CSDN和博客园的博文发布功能进行对比.我们就CSDN和博客园的博文发布页面.后台管理界面.发布新博客及界面进行了全面的 ...

  6. 如何让两个div并排显示

    正常情况下两个div都是上下排版的,那么怎么让它们并排显示呢? 方法一:都左浮动float:left; 方法二:一个左浮动,一个右浮动 方法三:给两个div都设置display:inline属性,但两 ...

  7. Perl 学习笔记-标量数据

    最近学习Perl, 准备看一遍入门指南,关键的东西还是记录下来,以便以后复习和查看参考. 笔记来自<<Perl语言入门第5版>> 1. 在Perl内部,不区分整数值和浮点数值, ...

  8. 3.1.6 循环栅栏:CyclicBarrier

    package 第三章.循环栅栏CyclicBarrier; import java.util.concurrent.BrokenBarrierException;import java.util.c ...

  9. CodeForces 342A Xenia and Divisors (水题)

    题意:给定 n 个数(小于等于7),让你把它分成 m 组,每组有三个数,且满足,a < b < c,并且 a 能整除 b,b 能整除 c. 析:对于这个题,因为题目说了是不大于7的,那么一 ...

  10. 设置emacs启动窗口的两种方法

    1. 设置位置和大小 ;;设置窗口位置为屏库左上角(0,0) (set-frame-position (selected-frame) 0 0) ;;设置宽和高 (set-frame-width (s ...