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和translation的区别和联系的更多相关文章

  1. CSS3中的transform变形

    在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...

  2. 对CSS3中的transform:Matrix()矩阵的一些理解

    只要有CSS基础的人肯定都知道,我们可以通过transform中的translate,scale,rotate,skew这些方法来控制元素的平移,缩放,旋转,斜切,其实这些方法呢都是为了便于开发者使用 ...

  3. CSS3中动画transform必须要了解的Skew变化原理

    transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...

  4. css3中的transform、transition、translate、animation(@keyframes)的区别

    一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...

  5. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  6. CSS3中的transform

    CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. transform 在2D里主要是4个方法.除了rotate 其他都是接受x y值 translate skew rotate sca ...

  7. css3中trastion,transform,animation基本的了解

    毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也.虽然 ...

  8. CSS3中伪类nth-child和nth-of-type区别

    本篇文章由:http://xinpure.com/css3-pseudo-class-difference-between-nthchild-and-nthoftype/ 首先来看看 nth-chil ...

  9. css3中有关transform的问题

    Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等.

随机推荐

  1. linux下修改环境变量

    把/etc/apache/bin目录添加到PATH中,方法有三: 1.#PATH=$PATH:/etc/apache/bin 使用这种方法,只对当前会话有效,也就是说每当登出或注销系统以后,PATH ...

  2. mysql:通用查询日志general_log

    1.通用查询日志:记录建立的客户端连接和执行的语句,通用查询日志默认情况下不是开启的,通用查询日志是以文本方式存放的 当需要采样分析的时候手工开启: SET Global general_log=1; ...

  3. Ant构建和部署项目(转)

    原文地址: http://www.blogjava.net/amigoxie/archive/2007/11/09/159413.html Ant是一个Apache基金会下的跨平台的构件工具,它可以实 ...

  4. 滚动新闻插件vticker

    vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB.vTicker 支持自定义滚动时间.间隔时间.显示个数.滚动方向(向上/向下).容器高度等等,但它对 HTML 结构有 ...

  5. 关于增强for循环

    1 增强for循环增强for循环是for的一种新用法!用来循环遍历数组和集合. 1.1 增强for的语法for(元素类型 e : 数组或集合对象) {}例如:int[] arr = {1,2,3};f ...

  6. Nodejs v4.x.0API文档学习(2)Assert断言测试模块

    文档参考地址:https://nodejs.org/dist/latest-v4.x/docs/api/ Assert(断言) assert模块提供了一组简单的断言测试方法,可以拥有测试不变量.该模块 ...

  7. WinForm控件小知识

    1.DataGridView控件显示自定义表 //造个数据表 DataTable dt = new DataTable(); dt.Columns.Add("DEcode", Sy ...

  8. SSRS集成至Web

    分几步进行,第一步要实现:IReportServerCredentials 接口第二步:拖入ReportViewer控件第三步:进行报表传参控制.具体如下图描述....代码部分参考下附件 using ...

  9. Hadoop基于Protocol Buffer的RPC实现代码分析-Server端

    http://yanbohappy.sinaapp.com/?p=110 最新版本的Hadoop代码中已经默认了Protocol buffer(以下简称PB,http://code.google.co ...

  10. 【MINA】心跳机制

    列上两篇好文章 http://www.cnblogs.com/pricks/p/3832882.html http://blog.csdn.net/cruise_h/article/details/1 ...