移动端 transform 详解

今天我总结了一下transform 在移动端的用法。这里我主要讲解它的 2D 方法。其实3D 方法不是很难，我感觉编写3D 的难处在于你的想象力和数学功底。这里主要是讲js控制transform

3D方法请见：http://blog.csdn.net/webxiaoma/article/details/69950318

一、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)