Basic usage and introduction of CSS3 2D animation

<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-axis, y-axis) on the basis of the original element x, y movement */
/*body. box:hover {-webkit-transform:translate ( -50px,60px);} */

/* 3. Scale (x, y) increase or decrease the element height x width y saclex (x) ScaleY (y)
Body. Box:hover{-webkit-transform:scale ( -10,-5) ScaleX (5) ScaleY (5);} */

/* 4.rotate (0deg) positive clockwise rotation negative value counterclockwise rotation
Body. Box:hover{-webkit-transform:rotate (260deg);}
Body. Box:hover{-webkit-transform:scale (5,3) rotate (30deg);} */
/* 5.-webkit-transform:skew (x, y) given angle
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>

Basic usage and introduction of CSS3 2D animation