CSS3中2D平面变换和过渡及动画效果

2D平面变换方法

对元素进行旋转，缩放，移动，拉伸。

1. 使用设置transform属性：
   rotate函数：设置旋转的度数。
   旋转的效果：
   
   代码的实现：

#rotateDiv
{
transform：rotate（30deg）;/*设置顺时针旋转的角度，也可以进行扩展*/
}

scale函数：设置缩放的效果。
transform：scale（x,y）:x为水平方向，y为垂直方向，小于1的话缩小，大于1放大。

#rotateDiv
{
transform：scale（2，2）;/*设置水平方向扩大为2倍，垂直方向一样*/
}

过渡

1. 让当前的一个元素在指定的时间中从一个属性变成另一个属性。
   
2. transition：属性名，持续时间，过渡方法；
   transition-property: 属性名（all表示全部），对哪个属性进行变化；
   transition-duration：持续的时间；
   transition-timing-function：过渡使用的方法。
   
   实现代码：

<style>
		div{
			height:30px;
			width:300;
			line-height: 30px;
			border-radius:5px;
			color：#000；
			background-color: silver;
			transition:all 1s linear;/*全部元素，过渡时间为1秒钟，线性过渡*/
		}/*初始的状态*/
		div:hover{
			color:white;
			background-color: #45B823;
		}/*鼠标悬停的时候终止状态*/
	</style>

动画效果

1. 首先定义一个动画，遵守@keyframes规则（关键帧），动画的效果将静态图片进行过渡即可。
2. 设置animation属性：
   
   keyframes规则来进行定义动画的效果，然后再设置悬停时候的效果。

3.实现代码：

@keyframes mycolor{/*定义在style.css文件中，进度出现的颜色*/
	0% {background-color: red;}
	30% {background-color: blue;}
	60% {background-color: yellow;}
	100% {background-color: green;}
}

div:hover{/*定义在.html文件中，设置时间，变换方式*/
			color:white;
			animation: mycolor 3s linear;
			background-color: #45B823;
		}

4. animation属性取值：