css3 Transform

transform:变形(transform: rotate | scale | skew | translate |matrix;)

一、旋转rotate   (对原元素指定一个2D rotation 2D 旋转)

1.css语法:transform:rotate(30deg);

2.JavaScript 语法：object.style.transform="rotate(7deg)"

 

二、缩放scale    (scale(x,y)使元素水平方向和垂直方向同时缩放,基点默认为元素 中心点,用transform-origin可改点默认基点)

1.css语法:transform:scale(1.0,1.4);　　//整数要在其后加小数0

2.JavaScript 语法: object.style.transform = "scale(1.0,1.4)";

三、移动translate   (translate(x,y)水平方向和垂直方向同时移动,基点默认为元素 中心点,用transform-origin可改点默认基点)

1.css语法：transform:translate(120px,-120px);　　//可应用到轮播图上

2.JavaScript 语法：object.style.tranform = "translate(120px,-120px)";

 

四、扭曲skew   (skew(x,y)使元素在水平和垂直方向同时扭曲,参数是角度deg)

1.css语法：tranform:skew(30deg,60deg);

2.JavaScript 语法：object.style.tranform = "skew(30deg,60deg)";

 

五、矩阵matrix      matrix(<number>, <number>, <number>, <number>, <number>, <number>) 

1.此属性值使用涉及到数学中的矩阵

 

transform运用多个属性值  (注意的是使用多个属性值时，必须使用空格分隔，如下面代码所示。)

1.transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);

 

scale缩放应用(手机端宽度检测缩放)

ViewScale();
function ViewScale(){
    var webWrap  = document.getElementById("#wrapper");  //获取最外层的容器
    var screenWidth = document.body.clientWidth;   //获取屏幕宽度
    var iScale = screenWidth/320;     //计算屏幕宽度比
    webWrap.style.tranform = "scale("+iScale+")";   //将最外层等比例缩放;
    webWrap.style.webkitTransform = "scale("+iScale+")";  //国内移动端浏览器大多基于webkit内核开发。
}