CSS3 vs Photoshop: Transforms自由变换:平移translate,缩放scale,旋转rotate,倾斜skew

CSS3的Transforms(变换),与Photoshop中的自由变换(Ctrl+T)很相似

平移translate,缩放scale,旋转rotate,倾斜skew

I. Rotate 旋转

Photoshop自由变换中的角度

对应的CSS3中的rotate方法,绕Z轴旋转
/*Rotate 15 degrees*/
.rotate15{
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}
/*Rotate 45 degrees*/
.rotate45{
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
/*Rotate -30 degrees*/
.rotate-30{
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
}

II. Skew 倾斜


/*Skew 30 degrees X on hover*/
.skew30x{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}
.skew30x:hover{
    -moz-transform: skewx(30deg);
    -webkit-transform: skewx(30deg);
}

/*Skew 15 degrees X*/
.skew15x{
    -moz-transform: skewx(15deg);
    -webkit-transform: skewx(15deg);
}
 
/*Skew -15 degrees X*/
.skew-15x{
    -moz-transform: skewx(-15deg);
    -webkit-transform: skewx(-15deg);
}
 
/*Skew 25 degrees Y*/
.skew25y{
    -moz-transform: skewy(25deg);
    -webkit-transform: skewy(25deg);
}
 
/*Skew -25 degrees Y*/
.skew-25y{
    -moz-transform: skewy(-25deg);
    -webkit-transform: skewy(-25deg);
}
英文原址:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-vs-photoshop-transforms/