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);
}

可以看出来，缩放是第一个元素和第四个元素的改变而成的。