css3基础变形的语法以及使用介绍

　　语法:

transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);

　　注:当多种变形方式综合在一起时，用空格隔开

　　1.rotate旋转(X/Y/Z必须为大写)

　　①rotateX(30deg)沿X轴翻转30deg等价于rotate3d(1,0,0,30deg)

　　3d空间的沿X轴翻转

　　②rotateY(30deg)沿Y轴翻转30deg等价于rotate3d(0,1,0,30deg)

　　3d空间的沿Y轴翻转

　　③rotateZ(30deg)沿Z轴翻转30deg等价于rotate3d(0,0,1,30deg)

　　3d空间的沿Z轴翻转

　　④rotate(45deg)当不指定轴时，相当于2d空间的旋转，正值为顺时针，负值为逆时针

　　注:设置旋转变形时，单位deg

　　2.scale缩放

　　①scaleX(1.5)沿X轴放大或缩小，大于1为放大，小于1为缩小

　　②scaleY(0.5)沿Y轴放大或缩小

　　③scale(1.5)X轴，Y轴同时放大或缩小

　　④scale(-1.5)先翻转再缩放

　　3.skew倾斜(扭曲)

　　①skewX(30deg)沿X轴倾斜

　　②skewY(-30deg)沿Y轴倾斜

　　③skew(30deg)不指定轴时，默认沿X轴倾斜

　　④注:下方两种写法倾斜效果不同

　　(a)skew(30deg,30deg)X轴，Y轴同时倾斜

　　(b)skewX(30deg)skewY(30deg)X轴，Y轴同时倾斜

　　注:倾斜单位角度(deg)

　　4.translate位移

　　①translateX(100px)沿X轴位移，向右为正，向左为负

　　②translateY(-100px)沿Y轴位移，向下为正，向上为负

　　③translateZ(100px)沿Z轴位移，向前为正，向后为负

　　注:当设置沿Z轴的位移时，需要给本元素或父元素设置透视值

　　④translate(100px)不指定轴时，默认沿X轴位移

　　⑤translate(1000px,100px)X轴和Y轴同时位移

　　translateX(100px)translateY(100px)X轴和Y轴同时位移