虽然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;
}
今天,就先说这么多吧。感谢大家的赏脸,希望对大家有所帮助。