专业编程基础技术教程

网站首页 > 基础教程 正文

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

ccvgpt 2024-08-12 14:59:46 基础教程 12 ℃

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

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

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

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;

}


今天,就先说这么多吧。感谢大家的赏脸,希望对大家有所帮助。

Tags:

最近发表
标签列表