第12章变形与动画相关属性.

本章要求：第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缩放动画—scale()函数12.1.4移动动画—translate()函数12.1.5倾斜动画—skew()函数12.1.6变形原点—transform-origin属性值/函数说明none表示无变换translate(length[,length])表示实现2D平移。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0translateX(length)表示在X轴（水平方向）上实现平移。参数length表示移动的距离translateY(length)表示在Y轴（垂直方向）上实现平移。参数length表示移动的距离scaleX(number)表示在X轴上进行缩放scaleY(number)表示在Y轴上进行缩放scale(number[,number])表示进行2D缩放。第一个参数对应X轴（水平方向），第二个参数对应Y轴（垂直方向）。如果第二个参数未提供，则默认取第一个参数的值skew(angle[,angle])表示进行2D倾斜。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0skewX(angle)表示在X轴上进行倾斜skewY(angle)表示在Y轴上进行倾斜rotate(angle)表示进行2D旋转。参数angle用于指定旋转的角度matrix(number,number,number,number,number,number)代表一个基于矩阵变换的函数。它以一个包含六个值(a,b,c,d,e,f）的变换矩阵的形式指定一个2D变换，相当于直接应用一个[abcdef]变换矩阵。也就是基于X轴（水平方向）和Y轴（垂直方向）重新定位元素，此属性值的使用涉及到数学中的矩阵12.1.1变形基础—transform属性在CSS3中提供了transform和transform-origin两个用于实现2D变换的属性。其中，transform属性用于实现平移、缩放、旋转和倾斜等2D变换，而transform-origin属性则是用于设置变换的中心点的。下面将分别介绍如何实现平移、缩放、旋转和倾斜等2D变换，以及设置变换的中心点。在进行详细介绍之前，先来了解transform属性的基本语法格式。transform属性的语法格式如下：transfor:none|matrix(number,number,number,number,number,number)?translate(length[,length])?translateX(length)?translateY(length)?rotate(angle)?scale(number[,number])?scaleX(number)?scaleY(number)?skew(angle[,angle])?skewX(angle)||skewY(angle)?从该语法格式中可以看出，transform属性的属性值由如表12-1所示的值及函数组成。表12-1transform属性的属性值应用transform属性的rotate(angle)函数可以实现2D旋转。参数angle用于指定旋转的角度，其值可取正或负，正值代表顺时针旋转，负值代表逆时针旋转。在使用该函数以前，可以应用transform-origin属性定义变换的中心点。【例12-1】应用transform属性的rotate()函数分别实现顺时针旋转30度和逆时针旋转30度，关键代码如下：style.preview{background:url(images/style0.gif)no-repeat;/*设置背景图片，并且不重复*/position:absolute;/*设置为绝对布局*/top:0px;/*设置顶边距*/left:0px;/*设置左边距*/width:240px;/*设置宽度*/height:210px;/*设置高度*/}#rotate{-moz-transform:rotate(30deg);/*Firefox下顺时针旋转30度*/-webkit-transform:rotate(30deg);/*Chrome下顺时针旋转30度*/-o-transform:rotate(30deg);/*Opera下顺时针旋转30度*/-ms-transform:rotate(30deg);/*IE下顺时针旋转30度*/}12.1.2旋转动画—rotate()函数#rotate1{left:300px;-moz-transform:rotate(-30deg);/*Firefox下逆时针旋转30度*/-webkit-transform:rotate(-30deg);/*Chrome下逆时针旋转30度*/-o-transform:rotate(-30deg);/*Opera下逆时针旋转30度*/-ms-transform:rotate(-30deg);/*IE下逆时针旋转30度*/}#wall{background-image:url(images/bg_main.jpg);max-width:600px;/*设置最大宽度*/height:300px;/*设置最大高度*/}/style/headbodystyle=margin:0px;divid=wall/divdivclass=previewstyle=background-image:none;border:1px#000000dashed;/divdivclass=previewid=rotate/divdivclass=previewid=rotate1/div在IE浏览器中浏览该页面，可以看到如图12-1所示的界面图12-1应用transform属性旋转字条图片逆时针旋转30度顺时针旋转30度虚线框的位置为原图像的位置应用transform属性的scale(number[,number])、scaleX(number)、scaleY(number)函数可以实现缩放。其中，scale(number[,number])可以实现在X轴和Y轴上同时缩放，而后面的两个函数则用于单独实现在X轴或者在Y轴上缩放。当使用scale(number[,number])函数时，如果只指定一个参数，那么在X轴和Y轴都缩放参数所指定的比例。实现缩放的这3个函数的参数值都是自然数数值（可以为正、负、小数），绝对值大于1，代表放大；绝对值小于1，代表缩小。当值为负数时，对象反转。当参数值为1时，表示不进行缩放。注意：当使用scaleX(number)或scaleY(number)函数时，实现的是非等比例缩放，也就是只能对X轴进行缩放或者对X轴进行缩放。12.1.3缩放动画—scale()函数【例12-2】应用transform属性的scale()函数实现在X轴和Y轴上同时缩放不同的比例，以及应用scaleX()函数实现在X轴上缩放，关键代码如下：style.preview{background:url(images/style0.gif)no-repeat;/*设置背景图片，并且不重复*/position:absolute;/*设置为绝对布局*/top:0px;/*设置顶边距*/left:0px;/*设置左边距*/width:240px;/*设置宽度*/height:210px;/*设置高度*/#xy{-moz-transform:scale(0.7,0.8);/*Firefox下在X和Y轴上进行缩放*/-webkit-transform:scale(0.7,0.8);/*Chrome下在X和Y轴上进行缩放*/-o-transform:scale(0.7,0.8);/*Opera下在X和Y轴上进行缩放*/-ms-transform:scale(0.7,0.8);/*IE下在X和Y轴上进行缩放*/#x{left:300px;-moz-transform:scaleX(1.2);/*Firefox下在X轴上进行缩放*/-webkit-transform:scaleX(1.2);/*Chrome下在X轴上进行缩放*/-o-transform:scaleX(1.2);/*Opera下在X轴上进行缩放*/-ms-transform:scaleX(1.2);/*IE下在X轴上进行缩放*/#wall{background-image:url(images/bg_main.jpg);max-width:600px;/*设置最大宽度*/height:300px;/*设置/style/headbodystyle=margin:0px;divid=wall/divdivclass=previewstyle=background-image:none;border:1px#000000dashed;/divdivclass=previewid=xy/divdivclass=previewid=x/div在IE浏览器中浏览该页面，可以看到如图12-2所示的界面。图12-2应用transform属性缩放字条图片在X轴上缩放120%在X轴上缩放70%，Y轴上缩放80%虚线框的位置为原图像的位置应用transform属性的translate(length[,length])、translateX(length)和translateY(length)函数可以实现2D平移。其中，translate(length[,length])可以实现在X轴和Y轴上同时平移，而后面的两个函数则用于单独实现在X轴或者在Y轴上平移。如果将translate(length[,length])中的第一个参数设置为0，那么可以实现translateY(length)函数的效果；如果将第二个参数设置为0，那么可以实现translateX(length)函数的效果。实现平移的这3个函数的参数值都是像素值，可以是正值也可以是负值，x轴为正值时代表向右移动，为负值时代表向左移动，y轴为正值时代表向下移动，为负值时代表向上移动。说明：目前主流浏览器并未支持标准的transform属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。12.1.4移动动画—translate()函数【例12-3】应用transform属性的translate()函数实现在X轴和Y轴上同时平移，以及应用translateX()函数实现在X轴上平移，关键代码如下：style.preview{background:url(images/style0.gif)no-repeat;/*设置背景图片，并且不重复*/position:absolute;/*设置为绝对布局*/top:0px;/*设置顶边距*/left:0px;/*设置左边距*/width:240px;/*设置宽度*/height:210px;/*设置高度*/#xy{-moz-