解锁css3新姿势之transform3D各属性及transform兼容之矩阵写法

闲来无事，整理一下可以打造炫酷网站的一些transform的属性

1. 矩阵transform:matrix()
这个矩阵哥们是有些厉害的，不得不多说两句，这哥们可以同时写上缩放，旋转，拉伸，位移等变形；详细内容见下面
2.transform-style:preserve-3d;创造3D空间
3.transform:rotate;2D旋转；
4.transform:scale(倍数)，缩放函数，取值正数，负数，小数；
5.transform:skew(xdeg,ydeg);拉伸函数或者斜切；
6.transform:translate();位移；
7.transform:可以同时有多种变形的样式混写

矩阵transform:matrix(),可以同时写上缩放，旋转，拉伸，位移等变形；

如果变形不用矩阵来写的话，不兼容ie9以下，js也不会获取到deg度数；

所以用矩阵来用数字值来表达度数，让js动态获取；

transform:matrix(a,b,c,d,e,f);martrix共有6个值； 初始值是matrix(1,0,0,1,0,0);  

兼容ie9，需要另写声明：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,SizingMethod='auto expand');

ie矩阵下没有e和f两个值，即没有位移的值；具体位移可用定位来写；

其中：M11==a;M12==b,M21=c,M22=d矩阵实现缩放；

x轴的缩放：a=x*a   c=x*c  e=x*e;y轴的缩放：b=y*b   d=y*d  f=y*f;d

如果只有缩放效果的话，那么只写a,d的值即可
如果有别的效果的话，matrix就不是默认值了，乘以相应的值即可；

.box{                width:300px;                height: 400px;                border:1px solid red;                margin: 50px auto 0;                font-size: 100px;                color:#fff;                line-height: 400px;                text-align: center;            }            .div1{                width:300px;                height: 400px;                background: blue;                transition: 3s;            }            .div1{                transform:matrix(0.5,0,0,0.5,0,0);                filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.5,M12=0,M21=0,M22=0.5,SizingMethod='auto expand');

矩阵实现位移；transform:matrix(a,b,c,d,e,f);只需要改变ef的值

x轴的位移：x+e;y轴的位移：y+f;位移数值可以不用加px单位

如果至实现 x和 y位移100px的话，matrix代码如下

transform:matrix(1,0,0,1,100,100);

矩阵实现斜切；

矩阵的斜切是cb的值，c就是skewX的效果，b是skewY的效果；
而cb是角度的tan值；tan值的计算公式Math.tan(xDeg/180*Math.PI);
但是matrix只识别tan值，不能写公式；
所以先计算tan值，可以用一个弹窗在网页中弹出来计算的tan值，之后再写在matrix中去
例如弹窗计算30度tan值代码

<script>       alert(Math.tan(30Deg/180*Math.PI))</script>

x轴的倾斜需要写的值： c=Math.tan(xDeg/180*Math.PI)；
y轴倾斜：b=Math.tan(yDeg/180*Math.PI)；
例如实现只有x轴拉伸30度的效果

transform:matrix(1,0.577,0,1,0,0);filter:progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=0.577, M21=0 , M22=1,SizingMethod='auto expand');矩阵实现旋转；

transform:matrix(a,b,c,d,e,f);需要改变abcd的值

其中a d是相等的cos值；
b c是正负的sin值；
同样的可以用弹窗计算相应的值
计算公式：
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
例如弹窗计算30度的sin值

<script>    alert(Math.sin(30/180*Math.PI));</script>

如果之前没有别的样式，直接在abcd上写上相对应的值即可；
如果之前有别的样式，即abcd不是默认值了，那么写上计算出的abcd值乘以以前的值 ；