前言上一篇文章主要讲述了CSSStyleChange中裁剪、Z-Index、清除、改变元素的基础知识。在本文中，我们将介绍2D变换在CSS样式变换中的基本用法。二维变换1).元素位移translate(left,topedge)div{transform:translate(50px,100px);-ms-transform:translate(50px,100px);/*IE9*/-webkit-transform:translate(50px,100px);/*Safari和Chrome*/-o-transform:translate(50px,100px);/*Opera*/-moz-transform:translate(50px,100px);/*火狐*/}2).元素旋转rotate(angle)div{transform:rotate(10deg);-ms-transform:rotate(10deg);/*IE9*/-webkit-transform:rotate(10deg);/*Safari和Chrome*/-o-transform:rotate(10deg);/*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);/*火狐*/}4).元素翻转给定的角度skew(x,y)div{transform:skew(13deg,21deg);-ms-transform:skew(13deg,21deg);/*IE9*/-webkit-transform:skew(13deg,21deg);/*Safari和Chrome*/-o-transform:skew(13d例如，21度）；/*Opera*/-moz-transform:skew(13deg,21deg);/*火狐*/}5).结合前面所有的方法matrix()div{transform:matrix(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);/*Safari和Chrome*/-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旋转，角度参数中指定testrotate3d(x,y,z,angle)定义3D旋转rotateX(angle)定义沿X轴的3D旋转rotateY(angle)定义沿Y轴的3D旋转rotateZ(angle)定义沿Z轴的3D旋转Others类似，但是还有一个用法上的区别：perspective(n)定义了一个3D变换元素的透视图。参考文档：W3C官方文档（CSS篇）总结本文主要介绍CSS样式变化篇中二维转换的基本设置，希望对大家的学习有所帮助。了解更多Python爬虫和数据挖掘专业网站：http://pdcfighting.com/了解更多Python网络爬虫和数据挖掘专业网站：http://pdcfighting.com/
