前言上一篇主要介绍了CSS样式变化中裁剪、Z-Index、清除、改变元素特性的基础知识。在本文中，我们将介绍CSS样式更改了2D变换的基本用法。二维变换1).元素位移translate(left,topedge)div{transform:translate(50px,100px);-ms-transform:translate(50px,100px);/*IE9*/-webkit-transform:translate(50px,100px);/*SafariandChrome*/-o-transform:translate(50px,100px);/*Opera*/-moz-transform:translate(50px,100px);/*Firefox*/}2).元素旋转rotate(角度)div{变换:旋转(10度);-ms-变换:旋转(10度);/*IE9*/-webkit-变换:旋转(10度);/*SafariandChrome*/-o-变换:旋转(10度);/*Opera*/-moz-transform:rotate(10deg);/*Firefox*/}rotate()scale()skew()matrix()3).元素缩放scale(widthmultiple,heightmultiple)div{transform:scale(1,2);-ms-transform:scale(1,2);/*IE9*/-webkit-transform:scale(1,2);/*Safari和Chrome*/-o-transform:scale(1,2);/*Opera*/-moz-transform:scale(1,2);/*Firefox*/}4).元素翻转给定角度skew(x,y)div{transform:skew(13deg,21deg);-ms-transform:skew(13deg,21deg);/*IE9*/-webkit-transform:skew(13deg,21deg);/*SafariandChrome*/-o-transform:skew(13deg,21deg);/*Opera*/-moz-transform:skew(13deg,21deg);/*Firefox*/}5).结合前面所有的方法matrix()div{transform：矩阵（1.3，0.32，1.32，0.22，0.54，0.65）;-ms-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);/*IE9*/-moz-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);/*Firefox*/-webkit-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);/*SafariandChrome*/-o-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);/*Opera*/}定义6个数的矩阵6).2D转3Ddiv{transform:rotate(1deg);-ms-transform:rotate(1deg);/*IE9*/-moz-transform:rotate(1deg);/*Firefox*/-webkit-transform:rotate(1deg);/*Safari和Chrome*/-o-transform:rotate(1deg);/*Opera*/}里面包含了所有的2D方法和3D方法，可以单独设置每个方法的x轴和y轴转向值，例如：rotate(angle)定义2D旋转，并在参数中指定角度测试rotate3d(x,y,z,angle)定义3D旋转rotateX(angle)定义沿X轴的3D旋转rotateY(angle)定义沿Y轴的3D旋转rotateZ(angle)定义3D旋转alongZaxisothersaresimilarUsage，但还有另一种用法不同：perspective(n)为3D变换元素定义透视图。参考文档：W3C官方文档（CSS篇）总结本文主要介绍CSS样式变化篇中二维转换的基本设置，希望对大家的学习有所帮助。
