码迷,mamicode.com
首页 > Web开发 > 详细

CSS3-matrix矩阵

时间:2015-08-20 23:47:52      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:

今天终于知道matrix矩阵的工作原理,原来跟自己大一时学习的线性代数有很大的关系,看来得找个时间回去补一下功课了….


技术分享

 

这就是矩阵的运算了,简化为公式:

matrix(a,b,c,d,e,f);

x’=ax+cy+e

y’=bx+dy+f

所以给定一个matrix矩阵,通过上面的公式变换就可以得到不同的效果,这关系到计算机图形学(省略1w+字..)

css3的transform属性很好用,其实可以变换为matrix矩阵工作,只需要给abcdef附上相应的值就可以了。

比如 translate(tx,ty) 可以由 matrix(1,0,0,1,tx,ty) 转换而来,计算方法见公式

scale(sx,sy) 可以由 matrix(sx,0,0,sy,0,0)转变

rotate(θ) 可以由 matrix(cosθ,sinθ,-sinθ,cosθ,0,0)转变而来

skew(θx,θy) 可以由 matrix(1,tan(θy),tan(θx),1,0,0)转变过来

 

[转自]http://www.cnblogs.com/GeekHacker/archive/2012/07/13/2589876.html

其他相关博客:

理解CSS3 transform中的Matrix(矩阵):

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/comment-page-2/

 

IE矩阵滤镜Matrix旋转与缩放及结合transform的拓展:

http://www.zhangxinxu.com/wordpress/2011/03/ie%E7%9F%A9%E9%98%B5%E6%BB%A4%E9%95%9Cmatrix%E4%B8%8B%E6%97%8B%E8%BD%AC%E4%B8%8E%E7%BC%A9%E6%94%BE%E5%8F%8A%E7%BB%93%E5%90%88transform%E7%9A%84%E6%8B%93%E5%B1%95/

 

IE滤镜与CSS3效果(详细整理分享):

http://www.jb51.net/css/71829.html

 

CSS3-matrix矩阵

标签:

原文地址:http://www.cnblogs.com/k11590823/p/css.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!