首页 > 代码库 > 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的应用