css3的应用使原本有些复杂的效果变得更为简便，合理的运用css3提供的参数可以实现许多你意想不到的效果。

本篇文章就来介绍使用css3实现页面的页面的缩放效果。

页面缩放主要使用的css3的transform-origin和transform scale。

    transform-origin 属性允许您改变被转换元素的位置。

    scale()方法来将元素根据中心原点进行缩放。

通过上面给出两个参数的说明，是否对页面缩放有大致逻辑呢？

先给出定义的方法，看完方法再来看看它的使用及说明：

let bodySize = 1;
function addSize(type){
	if(type == 'add'){
		bodySize = bodySize + 0.1
		$('body').css({'transform-origin': 'left top'})
	}else{
		if(bodySize < 0.2){
			bodySize = 0.2
		}else{
			bodySize = bodySize-0.1
		}
		$('body').css({'transform-origin': 'center'})
	}
	$('body').css({'transform': 'scale('+(bodySize)+')'})
}

需要注意的是：该效果是基于jq的。若你不是使用jq，理解逻辑后同理用原生js一样可以简便实现该效果。

 方法使用：

    定义的addSize只传递了一个参数，该参数为add或sub。意思为放大或缩小，进入页面后设置了一个默认的bodySize即原生尺寸，每次调用addSize就根据需求放大或缩小0.1即百分之十。

注意的是，放大和缩小其对应的元素位置也需要进行调整即对transform-origin的使用。