<style>
body{height:400px;border:1px solid #000;}
.box{width:90px;height:30px;border:1px solid;border-radius:8px;background:linear-gradient(to top,red,orange);margin:200px auto;stransform:2s;-webkit-transform-origin:right,bottom;}
.box a{text-decoration:none;text-align:center;display:block;line-height:31px;}

/*2.tanslate:(x轴,y轴) 在原元素的基础上x,y移动*/
/*body .box:hover {-webkit-transform:translate(-50px,60px);} */

/* 3. scale(x,y)增加或缩小元素 高x 宽y sacleX(x) scaleY(y)
body .box:hover{-webkit-transform:scale(-10,-5) scaleX(5) scaleY(5);} */

/* 4.rotate(0deg) 正值顺时针旋转 负值逆时针旋转
body .box:hover{-webkit-transform:rotate(260deg);}
body .box:hover{-webkit-transform:scale(5,3) rotate(30deg);} */
/* 5.-webkit-transform:skew(x,y) 给定角度
body .box:hover{-webkit-transform:skew(30deg,50deg);}*/

/*6.body .box:hover{transform:matrix(0.866,0.5,-0.5,0.866,0,0);}*/
</style>

css3 2D动画的基本用法和介绍