资源描述：
《第12章变形与动画相关属性ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、本章要求：第12章变形与动画相关属性transform属性的使用如何选择、缩放、移动和倾斜动画CSS3中的变形原点transition属性的使用CSS3中的动画应用主要内容1.CSS变形（Transformation）2.CSS过渡—transition属性3.CSS动画—animation属性4.综合实例——模拟进度条效果第12章变形与动画相关属性12.1CSS变形（Transformation）12.1.1变形基础—transform属性12.1.2旋转动画—rotate()函数12.1.3缩放动画—s
2、cale()函数12.1.4移动动画—translate()函数12.1.5倾斜动画—skew()函数12.1.6变形原点—transform-origin属性值/函数说明none表示无变换translate([,])表示实现2D平移。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0translateX()表示在X轴（水平方向）上实现平移。参数length表示移动的距离translateY()表示在Y轴（垂直方向）上实
3、现平移。参数length表示移动的距离scaleX()表示在X轴上进行缩放scaleY()表示在Y轴上进行缩放scale([,])表示进行2D缩放。第一个参数对应X轴（水平方向），第二个参数对应Y轴（垂直方向）。如果第二个参数未提供，则默认取第一个参数的值skew([,])表示进行2D倾斜。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0skewX()表示在X轴上进行倾斜ske
4、wY()表示在Y轴上进行倾斜rotate()表示进行2D旋转。参数用于指定旋转的角度matrix(,,,,,)代表一个基于矩阵变换的函数。它以一个包含六个值(a,b,c,d,e,f）的变换矩阵的形式指定一个2D变换，相当于直接应用一个[abcdef]变换矩阵。也就是基于X轴（水平方向）和Y轴（垂直方向）重新定位元素，此属性值的使用涉及到数学中的矩阵12.1.1变形基础—t
5、ransform属性在CSS3中提供了transform和transform-origin两个用于实现2D变换的属性。其中，transform属性用于实现平移、缩放、旋转和倾斜等2D变换，而transform-origin属性则是用于设置变换的中心点的。下面将分别介绍如何实现平移、缩放、旋转和倾斜等2D变换，以及设置变换的中心点。在进行详细介绍之前，先来了解transform属性的基本语法格式。transform属性的语法格式如下：transfor:none
6、matrix(,
7、,,,,)?translate([,])?translateX()?translateY()?rotate()?scale([,])?scaleX()?scaleY()?skew([,])?skewX()
8、
9、skewY()?从该语法格式中可以看出，t
10、ransform属性的属性值由如表12-1所示的值及函数组成。表12-1transform属性的属性值应用transform属性的rotate()函数可以实现2D旋转。参数用于指定旋转的角度，其值可取正或负，正值代表顺时针旋转，负值代表逆时针旋转。在使用该函数以前，可以应用transform-origin属性定义变换的中心点。【例12-1】应用transform属性的rotate()函数分别实现顺时针旋转30度和逆时针旋转30度，关键代码如下：
