你需要知道的CSS3 动画技术[译](5)
作者:神采飞扬 来源:前端观察 发布时间:2009-12-30 17:02:00
Matrix
没错,Matrix就是矩阵,矩阵是高等数学中非常基础的一个东东,而在CSS 3中确实一个相当高级的功能,CSS 3引入matrix函数,可以非常灵活的实现上述的各种效果。它有6个参数(a,b,c,d,e,f),它事实上是一个3*3矩阵,经过该矩阵将旧的参数转换成新值:
| a b e |
| c d f |
| 0 0 1 |
如果你有兴趣深入研究,可以看一下这里http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined,这是SVG的一个文档,但是对于matrix变换的原理是通用的。
让我们来看一个例子吧:
#nav{
/* nav元素将会像右上角倾斜 */
-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
-o-transform: matrix(1, -0.2, 0, 1, 0, 0);
}
浏览器支持
可喜的是,IE支持matrix滤镜,虽然它不支持大部分CSS3变形功能,但是使用它的这个滤镜,基本也可以实现相同的效果,不过,你要先搞明白矩阵运算再说。webkit和Firefox(3.5+)、Opera 10.5都支持该功能。
链式变形
变形常常是单独的,但是如果你想同时用到多种变形,代码也是可以快速整合的,特别是使用私有扩展。幸运的是,我们有一些内置的缩写:
浏览器支持
可喜的是,IE支持matrix滤镜,虽然它不支持大部分CSS3变形功能,但是使用它的这个滤镜,基本也可以实现相同的效果,不过,你要先搞明白矩阵运算再说。webkit和Firefox(3.5+)、Opera 10.5都支持该功能。
#nav{
-moz-transform: translate(10, 25);
-webkit-transform: translate(10, 25);
-o-transform: translate(10, 25);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-moz-transform: scale(2, 1);
-webkit-transform: scale(2, 1);
-o-transform: scale(2, 1);
}
这些变形可以被链到一起,从而让你的代码更高效:
#nav{
-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);
-o-transform: translate(10, 25) rotate(90deg) scale(2, 1);
}
这些属性的真正的威力是合并到一起。你可以移动、旋转、缩放并控制任何内联元素和块级元素而不使用JavaScript。一旦这些属性的支持变的更加广泛,我们就可以创建更丰富和更轻量的界面和应用。
猜你喜欢
- 代码如下:var obj = document.getElementById("name"
- 插入视图的条件: 1.如果视图是基于一个基础表产生的,那么这就称为非连接视图,所有的非连接视图都是可以更新的,也就是说可以在该视图上进行,I
- blur事件在元素失去焦点时触发。在一些jquery的教程、api手册等上面对blur事件,提供了一个错误的例子,就是关于p标签失去焦点的问
- 14个超酷的js显示时间效果,一定有你想要的。正常时间显示运行效果图:<title>正常显示的时钟 - asp之家 - http
- 去除字符串左右两端的空格,在vbscript里面可以轻松地使用 trim、ltrim 或 rtrim,但在js
- Web Forms 2.0 是一个很有意思的东东,是 HTML 5 的组成部分。它的目标是提升表单的使用性 (usability),基本上就
- 如何使用Office Chart 9.0 制作图表?代码如下:chart90.asp<HTML><HEAD><
- <%dim ylj,ywj,Mlpath,Shell,rarcomm,RetCode,cmd,comm,fsoM
- 在备份数据库的时候,数据表中可能存在这样的值array('a'='b','c'='d
- 相信各位phper在日常开发中,会经常遇到需要合并数组的场景。那么,在php中都有哪一些方法可以用来合并数组呢。第一种,使用&ldq
- CSS代码更清晰高效的一些经验是许多网页制作者与开发者都关心的问题。但是大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,合理的
- 说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 bo
- 内容摘要:最近逛论坛经常看到有朋友问上传文件怎么重命名,怎么以当前日期来重命名上传文件。现在我就介绍一下重命名的方法,希望对大家有所帮助。本
- PL/SQL单行函数和组函数详解 函数是一种有零个或多个参数并且有一个返回值的程序。在SQL中Oracle内建了一系列函数,这些函数都可被称
- HTTP-REFERER这个变量已经越来越不可靠了,完全就是可以伪造出来的东东。 以下是伪造方法:ASP/Visual Basic代码 di
- Logo是品牌图形区别的点睛之处,我们每天都要接触很多logo - 在高速公路上,在购买商品时,以及浏览各种网站。我们查看很多logo设计,
- 谁在用这些导航google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜
- 我很想自己写一个这样的程序,不过wordpress是php的,我blog是ASP的,只好用ASP写代码了。经过一番折腾测试,终于让我的梦想变
- 本文介绍了随机提取N条记录的例子,通过Sql server与access数据库的代码比较让你更快的掌握。随机提取10条记录的例子:Sql s
- 接下来我利用一点空余时间发一个函数里面包含和添加和删除功能。实验的架构可以使用IIS.5WEB服务器ACCESS数据库。这个我其实不用说的很