transform是css3的新特征之一。有了它可以box module变的更真实，这篇文章将周全先容关于transform的使用。

transform的作用 

transform可以让米素应用 2D 或 3D 转换。该属性允许我们对米素举行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。  这些属性界说上都从属于transform，因此把它们直接作为transform的value来表达。

transform的兼容写法

固然使用css3的实现一样平常都不会兼容低版面的IE,这里整理其他浏览器的兼容写法如下：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

说明：Internet Explorer 9 支持替换的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替换的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。

transform语法

transform: none|transform-functions;

none:示意不进么变换；示意一个或多个变换函数，以空格离开；换句话说就是我们同时对一个米素举行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒人人的，以往我们叠加效果都是用逗号（“，”）离隔，但transform中使用多个属性时却需要有空格离隔。人人记住了是空格离隔。

transform-functions取值：transform属性实现了一些可用SVG实现的同样的功效。它可用于内联(inline)米素和块级(block)米素。它允许我们旋转、缩放和移动米素，他有几个属性值参数：rotate;translate;scale;skew;matrix。

transform常用属性

transform:rotate()：

旋转； 单米deg，设置的值为正数示意顺时针旋转，若是设置的值为负数，则示意逆时针旋转。

transform:translate()：

移动/位移；向右向上为整数，向左向下位移则为负“-”。

translate(x,y)水平偏向和垂直偏向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平偏向移动（X轴移动）；translateY(Y)仅垂直偏向移动（Y轴移动）。

transform:scale()：

比例；比例放大用整数，缩小则为负“-”。

scale(X,Y)是用于对米素举行缩放，可以通过transform-origin对米素的基点举行设置，同样基点在米素中央位置；基中X示意水平偏向缩放的倍数，Y示意垂直偏向的缩放倍数，而Y是一个可选参数，若是没有设置Y值，则示意X，Y两个偏向的缩放倍数是一样的。并以X为准。  

scaleX() ： 使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。scaleX示意米素只在X轴(水平偏向)缩放米素，他的默认值是(1,1)。

scaleY() ： 使用 [1,sy] 缩放矢量执行缩放操作，sy为所需参数。scaleY示意米素只在Y轴（垂直偏向）缩放米素。

transform:skew()：

倾斜/扭曲；参数示意倾斜角度，单米deg。

skew(x,y)使米素在水平和垂直偏向同时扭曲（X轴和Y轴同时按一定的角度值举行扭曲变形）；

skewX(x)仅使米素在水平偏向扭曲变形（X轴扭曲变形）；

skewY(y)仅使米素在垂直偏向扭曲变形（Y轴扭曲变形）;

transform:matrix

js对transform的取值和赋值

赋值如下：

element.style.webkitTransform = "";
element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

取值通过:

if(element.currentStyle){
	return element.currentStyle['transform'];
}else{
	return getComputedStyle(element,null)['transform'];
}

固然transform的属性还对应3D的，这块平时我们使用的比较少，这里就没做详细的先容了，人人有详情可以去深入研究。

链接: http://www.fly63.com/article/detial/40