霍者博客

轻松玩转CSS3中的动画技术transform

虽然CSS3在兼容性方面不尽如意,但是,在一些动画效果方面,为广大前端开发人员带来了福音。既可以实现炫酷的渲染效果,又摆脱了必须使用脚本语言的弊端。在CSS3中,可以利用transform功能的缩放 scale、旋转 rotate、移动 translate来实现文字或图像的旋转、缩放、倾斜、移动。

1. scale(x,y) 对元素进行缩放

X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数

Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。

CSS代码:

.test{
-moz-transform:scale(2,2);
-webkit-transform:scale(2,2);
-o-transform:scale(2,2);
width:198px;
height:133px;
background:#f00;
}

2. rotate(x,y,z,angle) 对元素进行旋转

X表示沿着X轴旋转

Y表示沿着Y轴旋转

Z表示沿着Z轴旋转

CSS代码:

.text{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
width:198px;
height:133px;
background:#f00;
}

3. translate(x,y)对元素进行移动

X表示水平方向的移动距离 | Y表示垂直方向的移动距离

CSS代码:

.text{
-moz-transform: translate(10px, 20px);
-webkit-transform: translate(10px, 20px);
-o-transform: translate(10px, 20px);
width:198px;
height:133px;
background:#f00;
}

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/695.html,标题:轻松玩转CSS3中的动画技术transform

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。