css3 动画

css3 动画
动画：渐变、2D、3D、过渡、动画

　　例子：

/* 从上到下渐变*/
#div1{
width: 100px;
height: 100px;

background: linear-gradient(red, blue);
}
/* 从左到右渐变*/
#div2{
width: 100px;
height: 100px;

background: linear-gradient(to right,blue, red);
}
/* 左上角到右下角渐变*/
#div3{
width: 100px;
height: 100px;

background: linear-gradient(to bottom right,blue, red);
}
/* 多角度渐变*/
#div4{
width: 100px;
height: 100px;

background: linear-gradient(200deg,blue, red);
}

/*translate() 方法 移动*/
#div5{
width:50px;
height: 100px;
border:1px solid black;
background:#0AFF00;
transition:transform 2s;/* 过渡*/


}
#div5:hover{
transform: translate(100px,100px);

}

/*rotate() 方法 旋转*/
#div6{
width:50px;
height: 100px;
border:1px solid black;
background:#0AFF00;

}
#div6:hover{

transform: rotate(30deg);
}

/*scale() 方法 缩放*/
#div7{

width:50px;
height: 100px;
border:1px solid black;
background:#0AFF00;
}
#div7:hover{

transform: scale(2,3);
}

/*
rotateX() 方法 绕X轴旋转
rotateY() 方法 绕Y轴旋转
*/
#div8{
width:10px;
height: 100px;
background:#0AFF00;
}
#div8:hover{
transform: rotateX(120deg);
/* transform: rotateY(120deg);*/
}

/*多项改变 */
#div8{
width:10px;
height: 100px;
background:#0AFF00;
transition:width 5s,height 5s, transform 5s;
/* 要添加多个样式的变换效果，添加的属性由逗号分隔：*/
}
#div8:hover{
width: 150px;
height: 500px;
transform: rotateY(120deg);
}