閒來無事，整理一下可以打造炫酷網站的一些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值乘以以前的值 ；