龙空技术网

CSS样式更改——2D转换

Python进阶学习交流 104

前言:

当前朋友们对“样式换成css”大致比较关怀,朋友们都想要分析一些“样式换成css”的相关内容。那么小编也在网络上收集了一些关于“样式换成css””的相关资讯,希望姐妹们能喜欢,小伙伴们快快来了解一下吧!

前言

上篇文章主要讲述了CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识,这篇文章我们来介绍下CSS样式更改中2D转换的基础用法。

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转换元素定义透视视图。

参考文档:W3C官方文档(CSS篇)

总结

这篇文章主要介绍了CSS样式更改篇中的2D转换基本设置,希望对大家的学习有帮助。

想要学习更多,请前往Python爬虫与数据挖掘专用网站:

标签: #样式换成css #改css样式