CSS3新特性————Transform

CSS中transform 属性

作用是变形，即修改元素自身的坐标空间。这个修改实际对应了一个坐标系统映射转换的矩阵。通过变形变换，元素可以实现在二维或三维的空间内的旋转、偏移、缩放和倾斜。

需要注意的是，虽然是关于坐标系统，但变换改变的只是元素的视觉渲染，那是在元素的布局计算后起作用的，因此在布局层面没有影响。

一般我们所看到的网页布局，遵循的是坐标系统的概念，这就是说，浏览器在实地渲染和显示一个网页之前，都会先进行布局计算，得到网页中所有元素对应的坐标位置，一旦元素的坐标位置或尺寸信息发生改变，浏览器就会重新进行布局计算，这个重新计算的过程叫做回流（reflow），一般情况下，transform不会引发回流。

主要包括以下几种：移动 translate，缩放scale，旋转rotate，翻转skew，改变旋转轴心

translate() 平移
使用transform实现元素的移动
1.如果只有一个参数就代表x方向
2.如果有两个参数就代表x/y方向*/transform: translate(100px);transform: translate(400px,500px);transform: translate(0px,500px);添加水平或者垂直方向的移动transform:translateX(300px);transform:translateY(300px);

		*{
		margin: 0;
		padding: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.div-translate{
			transform: translate(50px,10px);
			-webkit-transform:translate(50px,10px);
			/*Safari和Chrome*/
			-ms-transform: translate(50px,10px);
			/*IE9*/
			-o-transform: translate(50px,10px);
			/*Opera*/
			-moz-transform: translate(50px,10px);
			/*Firefox*/
		}

效果图
平移之前的盒子

平移后的盒子

rotate() 旋转
参数：正数就是顺时针方向，负数就是逆时针方向。 transform:rotate(90deg);

		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			/*为了看出效果，我把div一了点距离*/
			margin: 0 auto;
			margin-top: 30px;
		}
		.div-rotate{
			transform: rotate(20deg);
			-webkit-transform:rotate(20deg);
			/*Safari和Chrome*/
			-ms-transform: rotate(20deg);
			/*IE9*/
			-o-transform: rotate(20deg);
			/*Opera*/
			-moz-transform: rotate(20deg);
			/*Firefox*/
		}

效果图

scale() 缩放
实现缩放（参照元素的几何中心）：1指不缩放，>1.01放大 <0.99缩小。
1.如果只有一个参数，就代表x和y方向都进行相等比例的缩放
2.如果有两个参数，就代表x/y方向transform: scale(2);transform: scale(2,1); 缩放指定的方向 transform:scaleX(0.5);transform:scaleY(0.5);

		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin: 0 auto;
			margin-top: 30px;
		}
	
		.scale{
			transform: scale(3,2);
			-webkit-transform:scale(3,2);
			/*Safari和Chrome*/
			-ms-transform: scale(3,2);
			/*IE9*/
			-o-transform: scale(3,2);
			/*Opera*/
			-moz-transform: scale(3,2);
			/*Firefox*/
		}

效果图

skew() 翻转（拉伸）
如果角度为正，则往当前轴的负方向斜切，如果角度为负，则往当前轴的正方向斜切transform:skew(-30deg);两个值，一个往x方向，一个y方向transform:skew(30deg,-30deg);设置某个方向的斜切值transform:skewX(30deg);transform:skewY(30deg);

		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin: 0 auto;
			margin-top: 30px;
		}
		.div-skew{
			transform: skew(40deg,10deg);
			-webkit-transform:skew(40deg,10deg);
			/*Safari和Chrome*/
			-ms-transform: skew(40deg,10deg);
			/*IE9*/
			-o-transform: skew(40deg,10deg);
			/*Opera*/
			-moz-transform: skew(40deg,10deg);
			/*Firefox*/
		}

效果图