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. hadoop学习记录(零)

    这个博客开通快一年了,但是由于种种原因,始终没有能够养成定期更新的习惯. 最近完成了比赛的项目,向除了android开发以外再拓宽一下自己的技能树. 最近购买了<java8函数式编程>和& ...

  2. Android_listView_BaseAdapter

    layout.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...

  3. 利用iOS8新特性计算cell的实际高度

    在计算cell的实际高度是 我们一般是通过计算frame  拿到最底部一个控件的最大Y值从而的到cell 的高度  算来算去  比较麻烦 其实,iOS8已经提供了直接通过Cell高度自适应的方法了,根 ...

  4. 关于Eclipse插件开发(一)

    plugin.xml是插件和Eclipse内核的接口,Eclipse就像一所大宅子.它的外墙(plugin.xml)有很多门(扩展点), 要熟练进入这座大宅子,就得先搞清楚它有那些门(扩展点). 插件 ...

  5. 【总结】教你怎么将centos7打造成桌面系统

    http://tieba.baidu.com/p/3379447850 centos吧

  6. hadoop vs spark

    http://www.zhihu.com/question/26568496#answer-12035815 Hadoop首先看一下Hadoop解决了什么问题,Hadoop就是解决了大数据(大到一台计 ...

  7. SqlServer2005安装错误解决方法

    前段时间在安装数据库SQL Server2005时,在系统检测这一步计算机报了一个错误,提示“性能监视器计数要求(错误)”,使得安装无法继续进行,于是在网上找了些方法来解决,其中有一个方法最有效,在这 ...

  8. .NET通过调用Office组件导出Word文档

    .NET通过调用Office组件导出Word文档 最近做项目需要实现一个客户端下载word表格的功能,该功能是用户点击"下载表格",服务端将该用户的数据查询出来并生成数据到Word ...

  9. CORS 跨域

    跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题.不过现在,我们可以考虑一下W3C中一项新的特性——CORS(Cross-Origin Resource Sh ...

  10. ### About Multi-Object Tracking

    点击查看Evernote原文. #@author: gr #@date: 2014-10-17 #@email: forgerui@gmail.com Multi_Object Tracking Fr ...