CSS变化效果

/* CSS Document */

body{

         margin:50px;
}

div{

      width:200px;

height:200px;
background-color:silver;
box-shadow:2px 2px 2px orange;

 

 

     【自定义矩形matrix】

     webkit-transform:matrix(0,0,0,0,X轴位移,Y轴位移);

     webkit-transform:matrix(倍数*X,0,0,倍数*Y,0,0);

     webkit-transform:matrix(cosθ，sinθ,-sinθ,cosθ,0,0); 【CS-SC】

 

【平移】

-webkit-transform:translate(200px,200px);
-webkit-transform:translateX(200px);
-webkit-transform:translateY(200px);

【放大缩小，＜1缩小 、 ＞1放大】 

-webkit-transform:scale(0.5);
-webkit-transform:scale(1.5);
-webkit-transform:scale(0.5,1.5);
-webkit-transform:scaleX(1.5);
-webkit-transform:scaleY(1.5);   

 

【旋转，正数顺时针】
-webkit-transform:rotate(45deg);

【倾斜】
-webkit-transform:skew(45deg,30deg);
-webkit-transform:skew(45deg);
-webkit-transform:skewY(45deg);

 

【简写】

-webkit-transform:rotate(45deg) skew(45deg) scaleX(1.5);

 

【调整图片变形的基准点】
-webkit-transform-origin:left top;

-webkit-transform:rotate(45deg);