码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-10-04 11:51:23      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

<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动画的基本用法和介绍

标签:

原文地址:http://www.cnblogs.com/cuidan9495/p/5930147.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!