css3 transform方法经常使用属性

　　　　css3中transform方法是一个功能强大的属性，能够对元素进行移动、缩放、转动、拉长或拉伸等功能。

　　　　transform中最为经常使用的4个属性分别是：rotate();、scale();、skew();、translate()

　　　　1.旋转rotate()在我以前地文章中提到过，在这就不重复描述了，我要在剩下的3个方法中去详细描述

　　　　2.缩放scale();属性，元素的尺寸会增长或者减小，根据给定的宽度（x轴）和高度（y轴）参数。　　eg：scale(2,4)是把元素宽度转换为原尺寸的2倍，把高度转换为原始高度的4倍。

　　注：这里换成小数就是缩小！，一个参数就是宽和高一块儿都增长或减小。

　　　　3.倾斜skew();属性，把元素翻转给定角度，根据给定的水平线（x轴）和垂直线（y轴）参数。　　eg:skew(30deg,20deg)围绕x轴把元素倾斜30度，围绕y轴把元素倾斜20度。

　　注：一个参数表示水平翻转角度！

　　　　为了方便你们理解，请参看下图进行理解：

                                                                              

　　　　4.元素移动translate();属性，元素从当前位置移动，根据给定的left（x坐标）和top（y坐标）的位置参数。　　eg:translate(50px,100px);元素与左边距50px，与上边距100px距离（若有错误欢迎指正）

　　注：一个参数表示水平（x轴）。

 

　　　　而后将4个属性都写在一块儿，用以方便你们理解：　　　

.divtf{
	display: block;
	line-height:200px ;
	width: 200px;
	background-color: lightcyan;
	text-align: center;
	transition: all 1s linear;/*以前讲过的transition，他们俩配合起来，样式无敌啊*/
	margin: auto;
	margin-top: 150px;
}
.divtf:hover{
	transform: rotate(360deg) scale(2,2) translate(50px,50px) skew(150deg);
}
a{
	text-decoration: none;/*去掉下划线，师哥说有下划线像90年代网站.........*/
}

　　而后是效果图：

         起始样式                              

                                    　　　鼠标悬停后的样式

　　　　哈哈，好玩吧，动手试一下才会以为css3的样式真是挺有意思的，其中有旋转的动画，可是截图无法显示，有兴趣能够参考下本文代码。