CSS样式更改之2D转换的方法有哪些

本篇内容介绍了“CSS样式更改之2D转换的方法有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为桐乡企业提供专业的成都网站制作、成都网站建设、外贸营销网站建设，桐乡网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

2D转换
1).元素位移translate(左边,顶边)

div { transform: translate(50px,100px); -ms-transform: translate(50px,100px);    /* IE 9 */ -webkit-transform: translate(50px,100px);  /* Safari and Chrome */ -o-transform: translate(50px,100px);    /* Opera */ -moz-transform: translate(50px,100px);    /* Firefox */ }

2).元素旋转rotate(角度)

div { transform: rotate(10deg); -ms-transform: rotate(10deg);    /* IE 9 */ -webkit-transform: rotate(10deg);  /* Safari and Chrome */ -o-transform: rotate(10deg);    /* Opera */ -moz-transform: rotate(10deg);    /* Firefox */ } rotate() scale() skew() matrix()

3).元素缩放scale(宽度倍数，高度倍数)

div { transform: scale(1,2); -ms-transform: scale(1,2);  /* IE 9 */ -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);  /* IE 9 */ -webkit-transform: skew(13deg,21deg);  /* Safari and Chrome */ -o-transform: skew(13deg,21deg);  /* Opera */ -moz-transform: skew(13deg,21deg);  /* Firefox */ }

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);    /* IE 9 */ -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 and Chrome */ -o-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65);    /* Opera */ } 定义6个数的矩阵

6).2D过度到3D

div{ transform:rotate(1deg); -ms-transform:rotate(1deg);   /* IE 9 */ -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) 定义沿着 Z 轴的 3D 旋转 其它的都是差不多的用法，不过还有一个用法不同的就是： perspective(n)     为3D转换元素定义透视视图。

“CSS样式更改之2D转换的方法有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！