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);
}
可以看出来，缩放是第一个元素和第四个元素的改变而成的。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
