Transform:对元素进行变形;
Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键贞。开始,结束。
Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。可以设置多个关键贞。
 
Transition与Animation:
transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值,从而达到一种动画的效果。

我们首先学习Transform

transform 2D/3D 转换属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

CSS3 2D 转换

通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

1.2D Transform转换属性

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3

2.2D Transform 方法

函数 描述 实例 试一试
转换      
translateX(n)
translateY(n)
沿着 X 或Y 轴移动元素。    
translate(x,y) 沿着 X 和 Y 轴移动元素。

值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

div{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);        /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);     /* Firefox */
}

试一试
缩放      
scaleX(n)
scaleY(n)
改变元素的宽或高度。    
scale(x,y) 改变元素的宽度和高度。

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

div{
transform: scale(2,4);
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4);    /* Firefox */
}

试一试
定义 2D 旋转      
rotate(angle) 在参数中规定角度。turn是圈,1turn = 360deg;另外还有弧度rad,2πrad = 1turn = 360deg。如,transform:rotate(2turn); //旋转两圈

值 rotate(30deg) 把元素顺时针旋转 30 度。

div{
transform: rotate(30deg);
-ms-transform: rotate(30deg);        /* IE 9 */
-webkit-transform: rotate(30deg);    /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);        /* Firefox */
}

试一试
倾斜      
skewX(angle)
skewY(angle)
沿着 X 、或Y轴。    
skew(x-angle,y-angle) 沿着 X 和 Y 轴。

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。

div{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);    /* Firefox */
}

试一试
使用六个值的矩阵。      
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。

matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

使用 matrix 方法将 div 元素旋转 30 度

div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* Opera */
}

试一试

CSS3 Transform变形(2D转换)的更多相关文章

  1. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  2. css3 字体、2D转换、3D转换

    学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...

  3. CSS3 transform变形(2D转换)

    transform 属性应用于2D 或 3D 转换.该属性允许我们对元素进行平移.旋转.缩放或倾斜. 一.translate(x,y).translateX(n).translateY(n)定义2D平 ...

  4. css3 中的2D转换

    一.CSS3转换 通过转换实现对对元素进行旋转.缩放.移动.拉伸的效果:这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成. 2D转换采用transform属性来实现效果 ...

  5. CSS3 transform 属性(2D,3D旋转)

    一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...

  6. CSS3 transform变形(3D转换)

    一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...

  7. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  8. css3 transform(变形)笔记

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 一.旋转 ...

  9. CSS3中的2D转换

    通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 转换是使元素改变形状.尺寸和位置的一种效果. 注:Internet Explorer 10.Firefox 以及 Opera 支 ...

随机推荐

  1. WIFEXITED/WEXITSTATUS/WIFSIGNALED

    WIFEXITED/WEXITSTATUS/WIFSIGNALED If the exit status value (*note Program Termination::) of the chil ...

  2. PHP——初学,基础

    代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  3. gdb常用

    调试信息条件:-g或-gdbgcc -g -o test  test.cgcc -ggdb3 -o test test.cggdb3告诉gcc,使用gdb的扩展产生调试符号.其中“3”表示使用的是第三 ...

  4. Nginx下轻松开启Drupal简洁链接

    大家都知道Drupal在apache环境下使用简洁链接是件很轻松的事,因为官方已经把写好的.htaccess文件附在源代码里,一般在配置里直接就可以打开了.但在Nginx下却没有那么简单,但不用担心, ...

  5. JVM中的垃圾回收

    GC 垃圾回收回收什么 Java的内存分配原理与C/C++不同.C/C++每次申请内存时都要malloc进行系统调用.而系统调用发生在内核空间,每次都要中断进行切换,这须要一定的开销. 而Java虚拟 ...

  6. Win7/Win8下双击执行jar程序的方法

    问题 老妈喜欢看小说,又不会下载,于是用Java写了个自己主动下载小说的小程序 我用的Swing UI.直接生成了.jar文件,双击就可以执行 非常诡异的是.用Eclipse直接run能够执行,可是E ...

  7. iOS边练边学--通讯录练习之Segue使用,控制器的数据传递

    一.什么是segue Storyboard上每一根用来界面跳转的线,都是一个UIStoryboardSegue对象(简称Segue) 二.Segue的属性 每一个segue对象,都有三个属性 < ...

  8. IE文字重复显示的处理

    <body> <div id="container"> <!-- // 页头 --> <div id="header" ...

  9. thinkphp 点击分类显示分类下的文章(完整)

    控制器 <?php // 本类由系统自动生成,仅供测试用途 class IndexAction extends Action { public function index(){ $cate=M ...

  10. 关于Unity中的Input输入事件

    截获鼠标,键盘的消息 监听事件我们都是在Update里面监听的. Unity的虚拟轴打开:Edit-->Project Settings-->Input,打开的各个Name就是双引号里面要 ...