首页 > 代码库 > CSS3——transform2D的应用
CSS3——transform2D的应用
前言:
关于CSS3,我想最让人感到有意思的就是2D和3D的技术,这让我们的网页立马丰富起来,可以让我们完成一些很酷很炫的效果,比如旋转木马。经过一段时间的学习,让我对CSS3有了更近一步的了解,在此温故而知新。特别感谢张鑫的技术博客。
在W3CSchool中,会发现有 transform:rotate(); translate(23px);等元素除外,还有matrix(n,n,n,n,n,n)的属性(矩阵属性),几乎我们没怎么用过,因为大部分的属性已经可以满足我们的需求。其实,所有的 2D,3D效果 都是改变matrix()而得到的,如果你掌握 matrix()的方法,就是掌握了 CSS3中狂拽酷炫吊炸天效果的核心。
在此声明,下面的写的代码,不添加兼容浏览器的属性,请自行添加 IE 9(-ms-), Safari 和 Chrom(-webkit-), Opera (-o-),Firefox(-moz-);
1,位移 — translate(x,y)
定义2D转换,沿着X和Y轴移动元素,这个属性可改变元素在屏幕上的真实坐标
使用一般方法如下:
div{ transform:translate(50px,100px); /*或 transform:translateX(50px); transform:translateY(100px); */ }
使用矩阵
div{ transform:matrix(1,0,0,1,50,100);}
前面的4个值是固定的,后面第五个代表着 X轴的值,第六个代表着Y轴的值。
2,缩放— scale(x,y)
定义2D转换,改变元素的宽度和高度。是在元素本身进行再放大和缩小,但是却不改变元素本身的宽和高的值。
div{ transform:scale(2.2,1);/*或 transform:scaleX(2.2); transform:scaleY(1);*/ }
使用矩阵
div{ transform:matrix(2.2,0,0,1,0,0);}
可以看出来,缩放是第一个元素和第四个元素的改变而成的。
CSS3——transform2D的应用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。