CSS样式更改——2D转换

浏览: 863

前言

上篇文章主要讲述了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.30.32,1.32,0.220.54,0.65);
-ms-transform:matrix(1.30.32,1.32,0.220.54,0.65); /* IE 9 */
-moz-transform:matrix(1.30.32,1.32,0.220.54,0.65); /* Firefox */
-webkit-transform:matrix(1.30.32,1.32,0.220.54,0.65); /* Safari and Chrome */
-o-transform:matrix(1.30.32,1.32,0.220.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爬虫与数据挖掘专用网站:http://pdcfighting.com/

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

前端进阶学习交流.jpg

------------------- End -------------------

往期精彩文章推荐:

  • 一篇文章带你了解CSS3按钮知识

  • 一篇文章带你了解CSS3 3D 转换知识

  • 一篇文章带你了解SVG 渐变知识

推荐 0
本文由 dcpeng 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

0 个评论

要回复文章请先登录注册