阿牛博客

css3动画介绍之(一) – (CSS3 transform属性)

之前在联盟用css3动画做了一张比较简单的app介绍页(可以戳《联盟app下载展示页》查看),感觉css动画蛮好玩的,今天就为大家介绍一下css3动画:
首先说一下css3动画的好处吧:

通过 CSS3,我们能够创建很多酷炫动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript动画等,可以节约很多制作成本,而且平时的一些表现页面中,如招商页,产品新品发布页等一些宣传页中,我们也可以用适当的css动画去实现,这样写出来的页面没有那么死板生硬,会显得更生动,富有表现力

css3动画,会用到元素里面的animation(动画)属性或者transition(转换)animation配合@keyframes 规则,可以制作很多的动画,而在@keyframes 规则里面会经常用到一个css3属性:transform
对了,还有transition(转换),animation和transition都可以制作动画,那他们有什么区别呢?我觉得他们最大的区间别就是animation(如在鼠标单击、获得焦点、被点击或对元素任何改变中触发)有触发条件或者没有触发条件就可以执行,而transition一定要触发条件。关于transition后面我也会出一篇文章具体介绍的;

那接下来,我们就循序渐进,先学习一下css3里面比较简单的属性:transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、缩放scale、移动translate或倾斜扭曲skew。常在transition或者animation里面使用 可以使动画效果更加舒缓和谐。

下面为大家一一介绍一下transform里面的这四个属性:

一、旋转:rotate(angle)

rotate(angle) 定义 2D 旋转,在参数中规定角度。
参数:angle:定义旋转的角度,单位deg
实战就是最好的老师,介绍各个属性我就直接展示一些例子了,大家可以在实战中更好的学习。

例子-旋转45度:

经过我试试~

代码:

rotateY(angle):定义沿着 Y 轴的 3D 旋转。

例子-沿Y轴无限转动:

经过我试试~

代码:

注:这里为了展示直观用到了animation,这里大家只做了解,后面我会详细介绍的。写css3需要加几个浏览器内核的前缀,代码太多,所以这里的所有例子我只写兼容谷歌内核的及标准的(哈,本屌自认为谷歌浏览器开发最爽,所以习惯兼容谷歌先了。。),如果大家需要兼容更多,就自己加上各个浏览器的前缀。

类似的还有:

rotateX(angle):定义沿着 X轴的 3D 旋转。rotateZ(angle):定义沿着 Z 轴的 3D 旋转。和rotate类似就不一一介绍了。

二、缩放:scale(x,y) ;

scaleX(x);scaleY(y);scaleZ(z)
scale(x,y) :定义 2D 缩放转换。
参数:x:水平方向缩放倍数;Y:垂直缩放倍数

例子1-元素缩放2倍:
代码

经过我试试~

例子2-元素沿Y轴放大1.2倍

经过我试试~

类似的:scaleX(x):通过设置 X 轴的值来定义缩放转换。scaleZ(z):通过设置 Z 轴的值来定义 3D 缩放转换。

三、transform:skew(x,y);

参数:(x水平方向扭曲角度,y垂直方向扭曲角度) 单位:deg

1.例子-X斜切10度,y斜切45度

经过我试试~

代码:

类似的还有:skewX(angle) :定义沿着 X 轴的 2D 倾斜转换。 skewY(angle):定义沿着 Y 轴的 2D 倾斜转换。

四、元素位移:translate(x,y)

参数:x:沿x轴移动 Y:沿y轴移动 单位px或者%
01.例子-元素从坐标(0,0)移动到(200px,-200px)即斜右上移动

经过我试试~

代码:

关于坐标的移动还有个需要特别注意的地方:
就是它移动的的坐标Y正的正负是和我们理解的相反的,
如图:
坐标展示
类似的还有:translateY():沿x轴移动,translateX():沿y轴移动,比较简单,就不一一介绍了;
transform的四个属性基本介绍完了,接下来几篇文章我会介绍一下animation和transition。

相关文章:

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/72

上一篇: 初探正则在js里面的应用(二)-正则的在js里面的一些具体应用 » 下一篇: css3动画介绍之(二) – (CSS3 transition属性) »