今天我總結了一下transform 在移動端的用法。這裡我主要講解它的 2D 方法。其實3D 方法不是很難，我感覺編寫3D 的難處在於你的想象力和數學功底。這裡主要是講js控制transform

一、transform 位移

我們使用js 控制位移的方法有兩種：

1.translate

 <div class="div">  </div> // 樣式自己給

<script type="text/javascript">
     var div = document.querySelector('.div');
     div.style.webkitTransform = 'translate(50px,50px)'
 
 
     console.log(getComputedStyle(div)['transform']) // 獲取元素樣式 matrix(1, 0, 0, 1, 50, 50)
</script>

2.matrix() 矩陣方法:

matrix(a,b,c,d,e,f) // 有六個引數

控制位移引數：
x軸位移引數 e ;
y軸位移引數 f ;

上面位移用matrix() 方法去寫：

div.style.webkitTransform = "matrix(1,0,0,1,50,50)" 

二、transform 縮放

1.scale() 方法

 div
 
.style.webkitTransform = 'scale(0.5,0.5)' 

2.matrix()方法

matrix(a,b,c,d,e,f) // 有六個引數

控制位移引數：
x軸縮放參數 a ;
y軸縮放參數 d ;

上面位移用matrix() 方法去寫：

 div.style.webkitTransform = 'matrix(0.5,0,0,0.5,0,0)' ;

重點內容:

這裡有個問題：

• 當縮放和位移一起寫時，他們書寫的先後書序會帶來不同效果。
  ①例如：先寫位移效果

 div.style.webkitTransform = 'translate(50px,50px) scale(0.5,0.5) '
 
 
 console.log(getComputedStyle(div)['transform']) //結果：matrix(0.5,0,0,0.5,50,50)

這裡沒有什麼問題，和我們想象的一樣，元素先在x軸和y軸上移動50px；然後在縮小一倍；

②我們將位移和縮放倒過來寫

 div.style.webkitTransform = 'scale(0.5,0.5)  translate(50px,50px)' 
 console.log(getComputedStyle(div)['transform']) //結果：matrix(0.5,0,0,0.5,25,25)

這時我們會發現，元素先縮小了一半，但是位移也縮小了一半，元素在x軸和y軸上移動25px；

三、transform 斜切

斜切是按元素與x座標軸或y座標軸之間產生的一個角度，要把它和旋轉區分開

1.skew() 方法

div.style.webkitTransform = 'skewX(30deg)' ;
console.log(getComputedStyle(div)['transform']); //結果：matrix(1, 0, 0.57735, 1, 0, 0)

2.matrix()方法

matrix(a,b,c,d,e,f) // 有六個引數

控制斜切引數：
x軸斜切引數 c ;
y軸斜切引數 b ;

想要用matrix() 矩陣方法實現斜切我們要知道一些計算斜切的公式：
角度轉化為弧度公式： deg*Math.PI/180; （deg是角度）
正切公式： Math.tan();
如果你不是很瞭解這些公式，可以惡補一下初中數學知識。

上面位移用matrix() 方法去寫：

 var mat = Math.tan(30*Math.PI/180);
 div.style.webkitTransform = 'matrix(1,'+mat+',0,1,0,0)' ;
 console.log(getComputedStyle(div)['transform']); //結果：matrix(1, 0, 0.57735, 1, 0, 0)

四、transform 旋轉

1.rotate()方法

div.style.webkitTransform = 'rotate(30deg)' ;

console.log(getComputedStyle(div)['transform']);    //matrix(0.866025, 0.5, -0.5, 0.866025, 0, 0)

2.matrix()方法

matrix(a,b,c,d,e,f) // 有六個引數

控制斜切引數：
旋轉引數 a ; 旋轉角度
旋轉引數 b ; 旋轉方向 b為正值，c為負值時，順時針旋轉
旋轉引數 c ; 旋轉方向 b為負值，c為正值時，逆時針旋轉
旋轉引數 d ; 旋轉角度

角度轉化為弧度公式： deg*Math.PI/180; （deg是角度）

正弦公式： Math.sin();
餘弦公式： Math.cos();

let a = Math.cos(30*Math.PI/180);
let b = Math.sin(30*Math.PI/180);
let c = -Math.sin(30*Math.PI/180);
let d = Math.cos(30*Math.PI/180);
diva.style.webkitTransform = 'matrix('+ a +','+b+','+c+','+ d+',0,0)' ;

console.log(getComputedStyle(div)['transform']);    //matrix(0.866025, 0.5, -0.5, 0.866025, 0, 0)