css3 transform属性及其二维变换矩阵

transform属性实现了一些可用SVG(可缩放矢量图形)实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素,并且该元素 下的所有子元素 随着参数的设置 旋转、缩放 和移动。

(1) rotate (旋转),1个参数,参数是度数。允许你通过传递一个度数值来转动一个对象;其值可取正、负。正值代表顺时针旋转,负值代表逆时针旋转。例如:rotate(20deg) 顺时针旋转20度。

rotateX(旋转),1个参数,参数是度数。沿X轴旋转。rotateY(旋转),1个参数,参数是度数。沿X轴旋转。

  div { transform: rotate(30deg); }   //顺时针旋转30度

  div { transform:rotateY(30deg); } //沿Y轴旋转30度

(2) scale (缩放),1或2个参数,参数是自然数数值(可以为正、负、小数)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值。参数的含义:绝对值大于1,代表放大;绝对值小于1,代表缩小。当值为负数时,对象反转。

        div { transform: scale(2,0.5);}        //水平缩放2倍,垂直缩放0.5倍

(3) translate (平移),1或2个参数,参数是像素值。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0。参数也可取正负,x轴: 正值代表向右移动, 负值代表向左移动,y轴:正值代表 向下移动 , 负值 代表向上移动 。

        div { transform: translate(50px,100px); }   //水平平移50像素,垂直平移100像素

(4) skew (扭曲变形),1或2个参数,参数是度数。第一个参数对应X轴(水平方向上的倾斜角度),第二个参数对应Y轴(垂直方向上的倾斜角度)。如果第二个参数未提供,则默认值为0。

        div {  transform: skew(30deg,20deg);}        //水平方向上倾斜30度,垂直方向上也倾斜30度

(5) matrix(<number>, <number>, <number>,<number>, <number>, <number>) :以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵。

        div {  transform: matrix(0.866,0.5,0,5,0.866,0,0);}        //顺时针旋转30度。

 

  注意:顺便说一下,各大浏览器对transform属性的支持还在试验阶段,Firefox 需要添加 -moz-前缀,Chrome和Safari需要 -webkit-前缀,Opera需要 -o-前缀。IE 9 也开始支持二维矩阵变换,需要 -ms- 前缀。

 

  二维变换矩阵

  对于这个matrix的应用,一直很不解,不知道各个值的作用, 不明白它的运行机制。今天通过各种数据的实验,查找网上资料,对这个matrix基本会使用了。但由于没有线性代数的基础,对这个二维变换矩阵还是有些模糊,现在姑且把网上各位大神的总结整理一下,分享给大家。

Matrix方法中有六个参数,a,b,c,d,e,f。这六个参数对应的矩阵如下:

css3 transform属性及其二维变换矩阵
通过测试和总结,我们可以得出一下结论:

css3 transform属性及其二维变换矩阵

css3 transform属性及其二维变换矩阵

其实所有的 CSS3 变形效果,都可以用 matrix 来做到,而实际上,浏览器似乎也是把所有的效果全部转换为 matrix 去执行(只是我们并不知道而已)。
这么看來,我们可以小结一下:
1, 4 是缩放变形的结果  scale(sx,sy)可以由matrix(sx,0,0,sy,0,0)转变
5, 6 是平移变形的结果  translate(tx,ty)可以由matrix(1,0,0,1,tx,ty)转换而来,
2, 3 是扭曲变形的结果  skew(θx,θy)可以由matrix(1,tan(θy),tan(θx),1,0,0)转变过来
1, 2, 3, 4 是旋转变形的结果  rotate(θ)可以有matrix(cosθ,sinθ,-sinθ,cosθ,0,0)转变而来

本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2012/08/27/2659027.html如需转载请自行联系原作者


@挨踢前端

 

上一篇:Inner Join, Left Outer Join和Association的区别


下一篇:如何从 SAP Fiori Elements List Report Table 点击事件响应函数里拿到表格某一行的信息